一、Element-UI 简介
Element-Ul是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架，手机端有对应框架是Mint UI 。
官网：
https://element.eleme.io/#/zh-CN
git资源：
https://github.com/PanJiaChen/vue-element-admin
https://github.com/ElementUI/element-starter
二、安装element-ui
cli 2.0安装法：
npm i element-ui -S
cli 3.0安装法：
vue add element
使用vue-cli UI安装：
# 启动vue-cli UI:
vue ui
查找vue-cli-plugin-element：
三、引入使用
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
四、国际化
Element 组件内部默认使用中文，若希望使用其他语言，则需要进行多语言设置。以英文为例，在 main.js 中：
import locale from 'element-ui/lib/locale/lang/en'
Vue.use(ElementUI, { locale })
或
import lang from 'element-ui/lib/locale/lang/en'
import locale from 'element-ui/lib/locale'
// 设置语言
locale.use(lang)
兼容 vue-i18n@5.x
import VueI18n from 'vue-i18n'
import Element from 'element-ui'
import enLocale from 'element-ui/lib/locale/lang/en'
import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
Vue.use(VueI18n)
Vue.use(Element)
Vue.config.lang = 'zh-cn'
Vue.locale('zh-cn', zhLocale)
Vue.locale('en', enLocale)
五、Layout 布局
通过基础的 24 分栏，迅速简便地创建布局。
六、表单
el-form-item元素的prop属性绑定字段名name，表单验证时，就会验证el-input元素绑定的变量ruleForm.name的值是否符合验证规则
- 不使用v-model绑定数据，不可输入，所以一定要绑定数据。
七、Tabs 切换组件
- Tabs.vue
<template>
<el-tabs :tab-position="tabPosition" v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="用户管理" name="user">
<user v-if="isLoadUser"/>
</el-tab-pane>
<el-tab-pane label="配置管理" name="config">
<config v-if="isLoadConfig"/>
</el-tab-pane>
</el-tabs>
</template>
<script>
import User from "@/views/User";
import Config from "@/views/Config";
export default {
components: {
user: User,
config: Config
},
data() {
return {
activeName: "user",
tabPosition: "left",
isLoadUser: true,
isLoadConfig: false
};
},
methods: {
handleClick(tab, event) {
console.log(tab.name)
if (tab.name == "user") {
this.isLoadUser = true;
this.isLoadConfig = false;
} else if (tab.name == "config") {
this.isLoadUser = false;
this.isLoadConfig = true;
}
}
}
};
</script>
- user.vue
<template>
<div>
用户管理组件
</div>
</template>
<script>
export default {
mounted() {
console.log("用户管理组件");
}
}
</script>
<style scoped>
</style>
- config.vue
<template>
<div>配置管理组件</div>
</template>
<script>
export default {
mounted() {
console.log(" 配置管理组件");
}
};
</script>
<style scoped>
</style>
八、自定义主题
1. 安装工具
// 首先安装主题工具
npm i element-theme -g
// 安装白垩主题
npm i element-theme-chalk -D
2. 初始化变量文件
et -i [可以自定义变量文件，默认为element-variables.scss]
3 初始化变量文件
主题生成工具安装成功后，如果全局安装可以在命令行里通过 et 调用工具，如果安装在当前目录下，需要通过 node_modules/.bin/et 访问到命令。执行 -i 初始化变量文件。默认输出到 element-variables.scss，当然你可以传参数指定文件输出目录。
E:\XTSZ-Iot-Manager\vue-manage-iot>et -i
element-variables.scss 内容：
/* Color
-------------------------- */
/// color|1|Brand Color|0
$--color-primary: #409EFF !default;
/// color|1|Background Color|4
$--color-white: #FFFFFF !default;
/// color|1|Background Color|4
$--color-black: #000000 !default;
$--color-primary-light-1: mix($--color-white, $--color-primary, 10%) !default; /* 53a8ff */
$--color-primary-light-2: mix($--color-white, $--color-primary, 20%) !default; /* 66b1ff */
$--color-primary-light-3: mix($--color-white, $--color-primary, 30%) !default; /* 79bbff */
$--color-primary-light-4: mix($--color-white, $--color-primary, 40%) !default; /* 8cc5ff */
$--color-primary-light-5: mix($--color-white, $--color-primary, 50%) !default; /* a0cfff */
$--color-primary-light-6: mix($--color-white, $--color-primary, 60%) !default; /* b3d8ff */
$--color-primary-light-7: mix($--color-white, $--color-primary, 70%) !default; /* c6e2ff */
$--color-primary-light-8: mix($--color-white, $--color-primary, 80%) !default; /* d9ecff */
$--color-primary-light-9: mix($--color-white, $--color-primary, 90%) !default; /* ecf5ff */
4. 修改变量
直接编辑 element-variables.scss 文件，例如修改主题色为红色。
$--color-primary: red;
5. 编译主题
保存文件后，到命令行里执行 et 编译主题，如果你想启用 watch 模式，实时编译主题，增加 -w 参数；如果你在初始化时指定了自定义变量文件，则需要增加 -c 参数，并带上你的变量文件名，（每次改完变量后，都需要编译后 才会在页面中更改）。
编译完成后，会在根目录生成一个them目录。
6. 引入自定义主题
默认情况下编译的主题目录是放在 ./theme 下，你可以通过 -o 参数指定打包目录。像引入默认主题一样，在代码里直接引用 theme/index.css 文件即可。
import '../theme/index.css'
import ElementUI from 'element-ui'
import Vue from 'vue'
Vue.use(ElementUI)
7. 搭配插件按需引入组件主题
如果是搭配 babel-plugin-component 一起使用，只需要修改 .babelrc 的配置，指定 styleLibraryName 路径为自定义主题相对于 .babelrc 的路径，注意要加 ~。
{
"plugins": [["component", [
{
"libraryName": "element-ui",
"styleLibraryName": "~theme"
}
]]]
}
