什么是 ElementUI

官网介绍：Element，一套为开发者，设计师和产品经理准备的基于Vue 2.0的桌面端组件库

在开发的过程中，很多时候有很多的部分是可以被公共的时候，例如导航，底部的选项卡（手机web app）我们可以自己去开发，也可以使用第三方公司专门开发的这些组件库（UI组件库），ElementUI 就是其中的一种，还有几个比较好的：

1: MintUI （饿了么前端团队为M站项目开发的） http://mint-ui.github.io/docs/#/zh-cn2/radio

2: Iview （个人爱好者开发的一个组件库） https://www.iviewui.com/components/rate

3: vant （有赞公司开发的，有赞商城） https://youzan.github.io/vant-weapp/#/area

如何使用 ElementUI

1：在 vue-cli 创建的项目里安装 element-ui (推荐使用npm的方式安装，它能更好地和webpack打包工具配合使用。)

npm install element-ui

2：在 main.js 文件中写入如下代码

import ElementUI from 'element-ui' //引入相关的组件（一般我门将第三方组件称为插件） import 'element-ui/lib/theme-chalk/index.css' //组建的样式 Vue.use(ElementUI) //安装插件，然后我们就可以使用了

然后我们只需要把官网上我们需要的代码拿过来就好了

我们用一下，我在 about.vue 组件中加上从官网上拿来的代码（一个折叠面板）

<template> <div class="about"> //从官网上复制过来的 <el-collapse v-model="activeNames" @change="handleChange"> <el-collapse-item title="一致性 Consistency" name="1"> <div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div> <div>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div> </el-collapse-item> <el-collapse-item title="反馈 Feedback" name="2"> <div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div> <div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div> </el-collapse-item> <el-collapse-item title="效率 Efficiency" name="3"> <div>简化流程：设计简洁直观的操作流程；</div> <div>清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；</div> <div>帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。</div> </el-collapse-item> <el-collapse-item title="可控 Controllability" name="4"> <div>用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；</div> <div>结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。</div> </el-collapse-item> </el-collapse> </div> </template> <script> export default { data() { return { activeNames: ['1'] }; }, methods: { handleChange(val) { console.log(val); } } } </script>

运行一下，我们就能看到效果（它和 bootstrap类似）

实现 ElementUI 组件的按需加载

什么是按需加载和全局加载

全局加载：默认情况，ElementUI 的组件的加载方式使用的是全局加载，就是我们在使用 Vue.use(ElementUI) （Vue.prototype.components= { }）安装这个组件的时候，默认情况下，是把ElementUI的所有的组件全部进行注册，然后可以在任何地方使用提供的组件 按需加载：需要什么就引入什么组件 很少有一个项目会使用到ElementUI的所有的组件，我们做的项目一般只需要使用一部分的ElementUI的组件，则我们更应该是做组件的按需加载

按需加载的实现方式

1：需要安装一个第三方的 loader（做代码的转换操作）

yarn add babel-plugin-component

2：修改babel.config.js 文件

module.exports = { presets: [ '@vue/cli-plugin-babel/preset', ["es2015", { "modules": false }] ], "plugins": [ [ "component", { "libraryName": "element-ui", "styleLibraryName": "theme-chalk" } ] ] }

3：根据需要注册自己需要的组件 如我要引入 Button 和 Select ，我们只主需要注册这两个组件即可

import { Button, Select } from 'element-ui'; Vue.component(Button.name, Button); Vue.component(Select.name, Select); /* 或写为 * Vue.use(Button) * Vue.use(Select) */

4：在需要的地方写代码

<el-row> <el-button round>圆角按钮</el-button> <el-button type="primary" round>主要按钮</el-button> <el-button type="success" round>成功按钮</el-button> <el-button type="info" round>信息按钮</el-button> <el-button type="warning" round>警告按钮</el-button> <el-button type="danger" round>危险按钮</el-button> </el-row>

就能看到效果

ElementUI 主题色的设置

ElementUI 默认情况下，使用了一套颜色来显示相关的组件，例如 使用 primary 就是蓝色， success 就是绿色，使用一种语义化的方式去描述相关的颜色，一般情况下来说，官方提供的颜色就可以满足绝大部分项目的需求，但是有的时候公司不太喜欢默认的颜色，希望自己去更改一下ElementUI的颜色。则ElementUI提供修改颜色的机会，一般我们把这些颜色也叫作主题

修改方式一：主题编辑器

提供web版本的界面，让用户去配置自己喜欢的主题色，然后进行下载一个 css 文件，然后在自己项目导入即可

将下载好的文件放到 src 下，然后引入就行

修改方式一：命令行工具

1：安装主题生成工具

npm i element-theme -g

2：下载主题

npm i element-theme-chalk

3：初始化变量文件 element-variables.scss

et -i

4：在文件（element-variables.scss）里修改变量 5：编译

et

6：导入 index.css 文件

ElementUI 的国际化

国际化指的就是做的项目可以在多个国家使用（根据每个国家对应的语言，显示与之对应的语言信息）一般把这种项目叫做 i18n 项目

i18n 是什么？

国际化（ internationalization 这个单词存在 18 个字符，取其首位则为 i18n ）

1：完整引入

import ElementUI from 'element-ui' import locale from 'element-ui/lib/locale/lang/en' Vue.use(ElementUI, { locale })

1：按需引入

import Vue from 'vue' import { Button, Select } from 'element-ui' import lang from 'element-ui/lib/locale/lang/en' import locale from 'element-ui/lib/locale' // 设置语言 locale.use(lang) // 引入组件 Vue.component(Button.name, Button) Vue.component(Select.name, Select)