ElementUI 按需載入

vue專案使用element ui，在官網的範例中，是直接把載入的部分寫在main.js，可是有時候我們要載入的components一多，main.js就會變得很長，所以可以把它搬到另一個檔案，再從main.js統一引入。

---

安裝element ui

$ yarn add element-ui
//or
$ npm i element-ui -S

安裝按需載入要用到的babel套件

$ yarn add babel-plugin-component -D
// or
$ npm install babel-plugin-component -D

設定babel

babel.config.js (或者你是使用.babelrc)

module.exports = {
  //...
  plugins: [
    [
      "component",
      {
        libraryName: "element-ui",
        styleLibraryName: "theme-chalk"
      }
    ]
  ]
};

獨立element ui 載入檔

新增一個檔案plugin/elementui.js

import { Table, TableColumn } from "element-ui";
const element = {
  install: function(Vue) {
    Vue.use(Table);
    Vue.use(TableColumn);
  }
};
export default element;

因為在Vue.use這個方法中，會預設自動找到install這個方法。

main.js中全局引用

import Vue from "vue";
import element from "@/plugin/elementui";
Vue.use(element);

頁面中引用

element ui官網範例直接貼在專案中任何.vue檔都可以work喔！

<el-table :data="customers" 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>

這樣main.js就可以乾乾淨淨的使用所有components拉～（要加s）