如果能够理解前面几篇的内容，还需要了解脚手架的搭建的路由的配置，就能满足大部分功能的开发。，
尝试使用了ElementUI和IView，感觉IView的封装组件更加好看些，
我是做管理平台，table用的比较多，iView的table全部通过Js代码决定，我不是很喜欢这种方式，暂时还是选择了ElementUI。
IView官网：https://www.iviewui.com/
ElementUI官网：http://element-cn.eleme.io/#/zh-CN
其它基于Vue的框架：https://www.cnblogs.com/tkzc2013/p/8127294.html
IView的使用
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <style> .ivu-table .demo-table-info-row td { background-color: #2db7f5; color: #fff; } .ivu-table .demo-table-error-row td { background-color: #ff6600; color: #fff; } </style> <link rel="stylesheet" type="text/css" href="res/iview.css"> <script type="text/javascript" src="res/vue.min.js"></script> <script type="text/javascript" src="res/iview.min.js"></script> <title>IView测试</title> </head> <body> <div id="app"> <i-table :row-class-name="rowClassName" :columns="columns1" :data="data1"></i-table> </div> <script> new Vue({ el: '#app', data: { columns1: [ { title: 'Name', key: 'name' }, { title: 'Age', key: 'age' }, { title: 'Address', key: 'address' } ], data1: [ { name: 'John Brown', age: 18, address: 'New York No. 1 Lake Park', date: '2016-10-03' }, { name: 'Jim Green', age: 24, address: 'London No. 1 Lake Park', date: '2016-10-01' }, { name: 'Joe Black', age: 30, address: 'Sydney No. 1 Lake Park', date: '2016-10-02' }, { name: 'Jon Snow', age: 26, address: 'Ottawa No. 2 Lake Park', date: '2016-10-04' } ] }, methods: { rowClassName: function (row, index) { if (index === 1) { return 'demo-table-info-row'; } else if (index === 3) { return 'demo-table-error-row'; } return ''; } } }); </script> </body> </html>
ElementUI的使用
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <!-- import CSS --> <link rel="stylesheet" href="res/index.css"> <!-- import Vue before Element --> <script src="res/vue2.js"></script> <!-- import JavaScript --> <script src="res/index.js"></script> </head> <body> <div id="app"> <el-table :data="tableData" border style=" 100%"> <el-table-column fixed prop="date" label="日期" width="150"> </el-table-column> <el-table-column prop="name" label="姓名" width="120"> </el-table-column> <el-table-column prop="province" label="省份" width="120"> </el-table-column> <el-table-column prop="city" label="市区" width="120"> </el-table-column> <el-table-column prop="address" label="地址" width="300"> </el-table-column> <el-table-column prop="zip" label="邮编" width="120"> </el-table-column> <el-table-column fixed="right" label="操作" width="200"> <template slot-scope="scope"> <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button> <el-button type="text" size="small">编辑</el-button> <el-button @click.native.prevent="deleteRow(scope.$index, tableData)" type="text" size="small">移除 </el-button> </template> </el-table-column> </el-table> </div> <script> new Vue({ el: '#app', data: { tableData: [{ date: '2016-05-03', name: '王小虎', province: '上海', city: '普陀区', address: '上海市普陀区金沙江路 1518 弄', zip: 200333 }, { date: '2016-05-02', name: '王小虎', province: '上海', city: '普陀区', address: '上海市普陀区金沙江路 1518 弄', zip: 200333 }, { date: '2016-05-04', name: '王小虎', province: '上海', city: '普陀区', address: '上海市普陀区金沙江路 1518 弄', zip: 200333 }, { date: '2016-05-01', name: '王小虎', province: '上海', city: '普陀区', address: '上海市普陀区金沙江路 1518 弄', zip: 200333 }] }, methods: { handleClick: function (row) { alert(row); }, deleteRow: function (index, rows) { rows.splice(index, 1); } } }); </script> </body> </html>