本文主要包括以下4个内容
什么是ElementUI
Vue 中引入ElementUI
Vue+elementUI构建后台管理系统
开源项目推荐
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全栈面试前端基础》系列,完结
可以关注我的公众号,获取更多学习资料
点击“在看”,学多少都不会忘~