element-ui的使用
element-ui的使用
1. 简介
Element UI是饿了么团队提供的一套基于Vue2.0的组件库，可以快速搭建网站，提高开发效率 ElementUI PC MintUI 移动端
官网地址：
2. 快速上手
2.1 安装elment ui
cnpm install element-ui -S
2.2 在main.js中引入并使用组件
importElementUIfrom'element-ui'import'element-ui/lib/theme-chalk/index.css';//该样式文件需要单独引入Vue.use(ElementUI);这种方式引入了ElementUI中所有的组件
2.3 常用组件
布局
表格
表单元素
上传文件
。。。
3. 按需引入组件
3.1 安装babel-plugin-component
cnpm install babel-plugin-component -D
3.2 配置
vuecli2在.babelrc文件文件中添加以下配置：
"plugins": [["component", [ { "libraryName": "element-ui", "styleLibraryName": "theme-default" } ]]]
vuecli3在babel.config.js中添加以下配置：
module.exports={presets:['@vue/app'],plugins:[// element官方教程['component',{'libraryName':'element-ui','styleLibraryName':'theme-chalk'}]]}
3.3 引入需要的插件
在 main.js 中写入以下内容：
importVuefrom'vue';import{Button,Select}from'element-ui';importAppfrom'./App.vue';Vue.component(Button.name,Button);Vue.component(Select.name,Select);/* 或写为
* Vue.use(Button)
* Vue.use(Select)
*/
4. 自定义主题
4.1 在项目中改变 SCSS 变量
Element 的 theme-chalk 使用 SCSS 编写，如果你的项目也使用了 SCSS，那么可以直接在项目中改变 Element 的样式变量。
如果你的项目还没有安装sass-loader、node-sass，请先在项目里安装
cnpm i sass-loader -D//sass-loader依赖于node-sasscnpm i node-sass -D
接下来新建一个样式文件，例如 element-variables.scss，写入以下内容：
/* 改变主题色变量 */$--color-primary:#f00;/* 改变 icon 字体路径变量，必需 */$--font-path:'~element-ui/lib/theme-chalk/fonts'@import"~element-ui/packages/theme-chalk/src/index"
之后，在项目的入口文件中，直接引入以上样式文件即可（无需引入 Element 编译好的 CSS 文件）：
importVuefrom'vue'importElementfrom'element-ui'//import'element-ui/lib/theme-chalk/index.css';//这里无需引入element-ui的cssimport'@/assets/scss/element-variables.scss'Vue.use(Element)
主题色默认为蓝色：
image.png
这个时候主题色变成了我们设置的红色：
image.png
image.png
5.vue-element-admin（扩展）
https://panjiachen.github.io/vue-element-admin-site/zh/
6.其他
另一个基于 Vue.js的UI 组件库
iview（个人） pc
