vue + yarn 项目开发 (一)
1.打开src文件夹中的main.js文件,添加引用element ui框架
import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI)
2.src文件夹添加views文件夹,来放我们新建的页面
3.views文件夹下新建eletable.vue页面,以element ui的table组件来做练手
<template> <el-table :data="tableData" stripe style="width: 100%"> <el-table-column prop="date" label="日期" width="180"> </el-table-column> <el-table-column prop="name" label="姓名" width="180"> </el-table-column> <el-table-column prop="address" label="地址"> </el-table-column> </el-table> </template> <script> export default { data () { return { tableData: [{ date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1517 弄' }, { date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1519 弄' }, { date: '2016-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1516 弄' }] } } } </script>
4.添加路由指定到eletable.vue页面,打开router文件夹下的index.js文件
import Vue from 'vue' import Router from 'vue-router' import eletable from '../views/eletable.vue' Vue.use(Router) export default new Router({ routes: [ { path: '/eletable', name: 'eletable', component: eletable } ] })
5.页面效果
![](https://img2018.cnblogs.com/blog/1424469/201906/1424469-20190627132629418-739509159.png)