【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