本文主要包括以下4个内容

1. 什么是ElementUI

2. Vue 中引入ElementUI

3. Vue+elementUI构建后台管理系统

4. 开源项目推荐

1.什么是ElementUI

官网：https://element.eleme.cn/#/zh-CN描述：Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库.

2.Vue 中引入elementUI

1)npm 安装推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。

npm i element-ui -S

2)引入完整的 Element在 main.js 中写入以下内容：

import Vue from 'vue';import ElementUI from 'element-ui';import 'element-ui/lib/theme-chalk/index.css';import App from './App.vue';Vue.use(ElementUI);new Vue({  el: '#app',  render: h => h(App)});

3)导入组件进行测试

下面以Radio 单选框为例

官网地址：https://element.eleme.cn/#/zh-CN/component/radio

  备选项  备选项  export default {    data () {      return {        radio: '1'      };    }  }

4)打开页面测试

3.Vue+elementUI构建后台管理系统

参考布局容器

网址：https://element.eleme.cn/#/zh-CN/component/container

查看路由参数做到，点击左边页面内容跟着变化

查看导航菜单文档

官网：https://element.eleme.cn/#/zh-CN/component/menu

看到参数router ，开启之后可以通过index 使得右边页面进行替换

1)导入代码到App.vue,将右侧

替换为

2)在menu 标签添加路由配置

3)创建MyTable.vue 文件添加文件

                //这里可以导入其他文件(比如：组件，工具js，第三方插件js，json文件，图片文件等等)//例如：import 《组件名称》 from '《组件路径》';export default {//import引入的组件需要注入到对象中才能使用  components: {},  data() {    //这里存放数据    const item = {        date: '2016-05-02',        name: '王小虎',        address: '上海市普陀区金沙江路 1518 弄'      };      return {        tableData: Array(20).fill(item)      }  },  }

4)在router 文件中index.html 中添加router 配置

import MyTable from '@/components/MyTable'{  path: '/table',  name: 'table',  component: MyTable}

5)在App .vue 添加导航实现

  分组一  用户列表  Hello

6)测试页面一

页面二

4.开源项目推荐

1. vue-Element-Admin

GitHub Star 数 58000， GitHub 地址：

https://github.com/PanJiaChen/vue-element-admin

一个基于 vue2.0 和 Eelement 的控制面板 UI 框架。

2. vue-manage-system

GitHub Star 数 10800， GitHub 地址：

https://github.com/lin-xin/vue-manage-system

基于vue + element的后台管理系统解决方案

-END-

到此为止，《JAVA全栈面试前端基础》系列，完结

可以关注我的公众号，获取更多学习资料

点击“在看”，学多少都不会忘~