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)

| 軟體開發 | 網站建置 | 網頁系統 | 資料庫網站 |

| 客製化網站 (報名系統、投票系統、掛號系統...) |

| 前後端技術合作 |

歡迎與我們聯繫:jessica@penueling.com

加入Line立即聊聊:@539mjyid

0
0 回復

發表評論

Want to join the discussion?
Feel free to contribute!

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。