使用Element方便開發，依照官網連結方式使用

安裝element-ui

npm i element-ui

在/src/main.js中加入element-ui

import ElementUI from ‘element-ui’;
import ‘element-ui/lib/theme-chalk/index.css’;
Vue.use(ElementUI);

之後要再加入其他的套件也是類似的做法

接下來

試用一下這個套件的Radio，在component/Hello.vue中加入

儲存後啟動：npm run dev
OK，沒問題

然後嘗試寫一個後台介面，選擇Layout Container，取得Example Code

將Example code複製到App.vue(可直接覆蓋掉舊的Code)，這是一進來就會看到的畫面，由main.js掛載的頁面

儲存後會看到這個頁面

比較特別的部分是Table中的寫法

沒有使用迴圈但資料都有出來

這部分就要查一下官網的Table的Basic table，可以看到只要prop對應到data的key值就可以自動遍歷而產生表格了，官網部分往下來還可以看到Table Attributes可以尋找相關的屬性

接下來

對於Table的部分因後台要顯示不同的資料表給管理人員看，所以應該要依照路徑來做變動，將這部分抽取出來並使用<router-view>來做

將Example code註解

將這部分的內容做成Component，新增一個元件(MyTable.vue)

然後填寫自定義的Template，這部分就是vue的三個區塊的<Template>、<script>、<style>

接下來

將註解的Table複製到MyTable.vue的<template>裡的<div>，<script>中的資料也一併複製過去

接下來

在/route/index.js中新增路由

import MyTable from '@/components/MyTable'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/hello',
      name: 'Hello',
      component: Hello
    },
    {
      path: '/table',
      name: 'MyTable',
      component: MyTable
    }
  ]
})

接下來

要在左側中顯示使用者列表，並且路由到剛新增的MyTable.vue頁面，參考官網的NavMenu，並使用route屬性，在App.vue中找到<el-menu>加上此參數

<el-menu :default-openeds="['1', '3']" router="true">
...
<el-menu-item index="/table">使用者列表</el-menu-item>

完成後測試

路由成功