一、安装
这里首先得下载 Element UI 才能在项目中使用,方式有很多种,我是在项目初始化时以可视化面板的方式通过安装 Vue 脚手架来引入:
控制台输入:
vue ui
点击创建,设置好存放路径后点击在此创建新项目、项目取名、初始化 git
填写:init project、点击下一步进行预设配置(preset)
点亮 babel、router、linter/formatter、使用配置文件,点击下一步
取消 history 模式路由(hash模式兼容性更好)
选 eslint+standard confit,选 lint on save(ctrl+s就会对所写代码进行格式校验)
保存配置好的预设并取名
配置 Vue 路由
配置 Element-UI 组件库:在可视面板的插件中添加 Element-UI,搜索:vue-cli-plugin-element,配置插件:将 fully import 改成 import on demand(按需引入)
配置 axios 库:在安装依赖中搜索 axios 并安装,点击创建项目。
初始化 git 远程仓库并将本地项目托管到 GitHub:确认项目根目录有 .gitignore 文件,有 **node_modules、.idea **文件。
后台项目的环境安装配置(数据库、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;
}