整合Element-UI 组件 控制台输入命令:
npm i element-ui即可完成安装
然后引入UI 样式：
使用UI 提供的样式，并与样式进行数据绑定 效果图：备选项2 默认选中
快速使用Element-UI 搭建后台管理系统服务： 因为main.js 默认第一个访问App 组件，所以把App 中的内容重新修改了。
<template> <!-- el-container: 是一个大容器，包含整个页面--> <el-container style="height: 500px; border: 1px solid #eee"> <!-- el-aside: 左侧边导航栏 --> <el-aside width="200px" style="background-color: rgb(238, 241, 246)"> <el-menu :default-openeds="['1', '3']"> <el-submenu index="1"> <template slot="title"><i class="el-icon-message"></i>导航一</template> <el-menu-item-group> <template slot="title">分组一</template> <el-menu-item index="1-1">用户列表</el-menu-item> <el-menu-item index="1-2">Hello</el-menu-item> </el-menu-item-group> <el-menu-item-group title="分组2"> <el-menu-item index="1-3">选项3</el-menu-item> </el-menu-item-group> <el-submenu index="1-4"> <template slot="title">选项4</template> <el-menu-item index="1-4-1">选项4-1</el-menu-item> </el-submenu> </el-submenu> <el-submenu index="2"> <template slot="title"><i class="el-icon-menu"></i>导航二</template> <el-menu-item-group> <template slot="title">分组一</template> <el-menu-item index="2-1">选项1</el-menu-item> <el-menu-item index="2-2">选项2</el-menu-item> </el-menu-item-group> <el-menu-item-group title="分组2"> <el-menu-item index="2-3">选项3</el-menu-item> </el-menu-item-group> <el-submenu index="2-4"> <template slot="title">选项4</template> <el-menu-item index="2-4-1">选项4-1</el-menu-item> </el-submenu> </el-submenu> <el-submenu index="3"> <template slot="title"><i class="el-icon-setting"></i>导航三</template> <el-menu-item-group> <template slot="title">分组一</template> <el-menu-item index="3-1">选项1</el-menu-item> <el-menu-item index="3-2">选项2</el-menu-item> </el-menu-item-group> <el-menu-item-group title="分组2"> <el-menu-item index="3-3">选项3</el-menu-item> </el-menu-item-group> <el-submenu index="3-4"> <template slot="title">选项4</template> <el-menu-item index="3-4-1">选项4-1</el-menu-item> </el-submenu> </el-submenu> </el-menu> </el-aside> <!-- 这个el-container 就是左侧边导航栏右边的区域 --> <el-container> <!-- el-header:包含了查看，新增，删除按钮--> <el-header style="text-align: right; font-size: 12px"> <el-dropdown> <i class="el-icon-setting" style="margin-right: 15px"></i> <el-dropdown-menu slot="dropdown"> <el-dropdown-item>查看</el-dropdown-item> <el-dropdown-item>新增</el-dropdown-item> <el-dropdown-item>删除</el-dropdown-item> </el-dropdown-menu> </el-dropdown> <span>王小虎</span> </el-header> <!-- el-main:数据表格 --> <!-- :data -> v-bind:data ,这个data 就是下面data()， 返回一个长度为20 的数组，由data() 里面的数据填充，然后再把该数组 填充至下面表格中--> <el-main> <el-table :data="tableData"> <!-- 所以该表格就需要遍历数组中的数据，然后显示出来 --> <!-- prop 属性来对应对象中的键名即可填入数据 label 属性来定义表格的列名 可以使用width属性来定义列宽--> <el-table-column prop="date" label="日期" width="140"> </el-table-column> <el-table-column prop="name" label="姓名" width="120"> </el-table-column> <el-table-column prop="address" label="地址"> </el-table-column> </el-table> </el-main> </el-container> </el-container> </template> <script> export default { data() { const item = { date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }; return { tableData: Array(20).fill(item) } } }; </script> <style> .el-header { background-color: #B3C0D1; color: #333; line-height: 60px; } .el-aside { color: #333; } </style>效果图： 现在要把左侧导航栏的"用户列表"和 “Hello” 进行导航。在点击"用户列表"时才应该进入该列表页面。 即只要在menu 标签中将router 属性设置为true, 就可以在它的字标签中使用Index 属性作为该标签的路由地址。
将表格的内容抽取出来，重新定义一个vue 组件
<!-- --> <template> <div> <el-table :data="tableData"> <el-table-column prop="date" label="日期" width="140"> </el-table-column> <el-table-column prop="name" label="姓名" width="120"> </el-table-column> <el-table-column prop="address" label="地址"> </el-table-column> </el-table> </div> </template> <script> //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等） //例如：import 《组件名称》 from '《组件路径》'; export default { //import引入的组件需要注入到对象中才能使用 components: {}, props: {}, data() { // 这里存放数据 const item = { date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }; return { tableData: Array(20).fill(item) }; }, //监听属性 类似于data概念 computed: {}, //监控data中的数据变化 watch: {}, //方法集合 methods: { }, //生命周期 - 创建完成（可以访问当前this实例） created() { }, //生命周期 - 挂载完成（可以访问DOM元素） mounted() { }, beforeCreate() {}, //生命周期 - 创建之前 beforeMount() {}, //生命周期 - 挂载之前 beforeUpdate() {}, //生命周期 - 更新之前 updated() {}, //生命周期 - 更新之后 beforeDestroy() {}, //生命周期 - 销毁之前 destroyed() {}, //生命周期 - 销毁完成 activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发 } </script> <style scoped> </style>然后在index.js 中注册该vue 组件的路由 效果图： 点击“用户列表” -> 右侧出现数据
