Element UI 使用心得

一、安装

这里首先得下载 Element UI 才能在项目中使用，方式有很多种，我是在项目初始化时以可视化面板的方式通过安装 Vue 脚手架来引入：

1. 控制台输入：vue ui

2. 点击创建，设置好存放路径后点击在此创建新项目、项目取名、初始化 git

3. 填写：init project、点击下一步进行预设配置（preset）

4. 点亮 babel、router、linter/formatter、使用配置文件，点击下一步

5. 取消 history 模式路由（hash模式兼容性更好）

6. 选 eslint+standard confit，选 lint on save（ctrl+s就会对所写代码进行格式校验）

7. 保存配置好的预设并取名

8. 配置 Vue 路由

9. 配置 Element-UI 组件库：在可视面板的插件中添加 Element-UI，搜索：vue-cli-plugin-element，配置插件：将 fully import 改成 import on demand（按需引入）

10. 配置 axios 库：在安装依赖中搜索 axios 并安装，点击创建项目。

11. 初始化 git 远程仓库并将本地项目托管到 GitHub：确认项目根目录有 .gitignore 文件，有 **node_modules、.idea **文件。

12. 后台项目的环境安装配置（数据库、Node 环境等安装配置不一一赘述）。

二、引入

当然文档中推荐使用 CDN 引入 Element 的用户在链接地址上锁定版本，以免将来 Element 升级时受到非兼容性更新的影响。锁定版本的方法请查看 unpkg.com。

这里 2.14.1 版本需要在 main.js 中引入 Element UI 的 js 和 css 文件即可开始使用。（我的初始化过程漏掉了一个 css 文件需要自己导入样式文件，这里官方文档有补充说明）
相关组件按需引入即可，完整引入项目体积太大了：

按需引入：

借助 babel-plugin-component，我们可以只引入需要的组件，达到减小项目体积的目的。

首先，安装 babel-plugin-component：

npm install babel-plugin-component -D

然后，将 .babelrc 修改为：

{
  "presets": [["es2015", { "modules": false }]],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

如果只希望引入部分组件，比如 Button 和 Select，需要在 element.js 中写入以下内容：

import Vue from 'vue'
import {
  Breadcrumb,
  Card,
  Row,
  Tooltip,
  Pagination,
  Dialog,
  Tree,
  Cascader
} from 'element-ui'

Vue.use(Breadcrumb)
Vue.use(Card)
Vue.use(Row)
Vue.use(Tooltip)
Vue.use(Pagination)
Vue.use(Dialog)
Vue.use(Tree)
Vue.use(Cascader)
// 导入弹框提示组件 Message、MessageBox，该类组件和其他不同需要全局挂载
Vue.prototype.$message = Message
Vue.prototype.$confirm = MessageBox.confirm

三、使用

先查看自己需要什么类型的组件，在 Element UI 的文档中筛选查找，找到对应的代码模板，在自己项目的对应位置粘贴上文档中的代码，根据具体情况做下调整修改就可以了，如：

在 Element UI 中的标签名默认为对应的类名，添加样式时可以直接拿来使用，如：

.el-breadcrumb {
  margin-bottom: 15px;
  font-size: 12px;
}

.el-card {
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15) !important;
}

.el-table {
  margin-top: 15px;
  font-size: 12px;
}

.el-pagination {
  margin-top: 15px;
}

.el-cascader-menu {
  height: 228px;
}