【Vue課序5】保姆級：Vue+Vuex+Element

一、什麼是Element

element不用多說，與Ant Design一樣是頁面樣式組件庫，每個組件有着很多API需要讀者慢慢學習並運用到實際項目當中。有時候爲了方便交流，我們稱之爲 ’elm’ 或者 ’餓了麼‘

---

二、安裝”elm“

通過npm安裝：

npm install element-ui -S

通過yarn安裝：

yarn add element-ui -S

---

三、按需加載

1. 藉助 babel-plugin-component，我們可以只引入需要的組件，以達到減小項目體積的目的。

yarn add babel-plugin-component -D

配合elm-ui的ES標準

yarn add babel-preset-es2015 --save-dev

2. 修改 .babelrc

{
    "presets": [
        ["es2015", { "modules": false }], // 配合elm-ui的ES標準
        "stage-2" // 支持babel編譯 用來配合...mapState | ...mapGetter 的使用
    ],
    // 第三個參數爲 elm的按需加載
    "plugins": ["transform-vue-jsx", "transform-runtime", [
    
        "component",
    {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
    }
    ]],
    "env": {
    "test": {
        "presets": ["env", "stage-2"],
        "plugins": ["transform-vue-jsx", "transform-es2015-modules-commonjs", "dynamic-import-node"]
    }
  }
}

3. 將elm組件註冊到全局，修改main.js

import Vue from 'vue'
import App from './App'
import router from './router'

// 引入store樹
import store from './store.js'

// 此方法直接注入全局，子組件無需再引入
// 此時拿Table組件爲例子
import { Table, TableColumn } from 'element-ui';


// 使用Table組件
Vue.use(Table);
Vue.use(TableColumn);

Vue.config.productionTip = false

/* eslint-disable no-new */

new Vue({
    el: '#app',
    router,    
    store, // 註冊到全局
    components: { App },
    template: '<App/>'
})

4. 修改index.vue中的<template/>

<template>
    <div class="hello">

        <button v-on:click.stop="async_action()">異步請求</button>

        <!-- Table組件 詳情參數請閱讀官方文檔 -->
        <!-- https://element.eleme.cn/#/zh-CN/component/table —>

        <el-table :data="table.table" border style="width: 100%”>

            <el-table-column prop="id" label="id"></el-table-column>    
            <el-table-column prop="name" label="name"></el-table-column>
            <el-table-column prop="phone" label="phone"></el-table-column>
            <el-table-column prop="qq" label="qq"></el-table-column>

  		</el-table>

    </div>
</template>

5. 再次點擊按鈕，可以看到表格數據已成功渲染。

---

自己根據文檔編寫的項目無法正常運行請在github下載
git clone https://github.com/luvsta/First-Vue-Component