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.頁面效果