VUE CLI3 在已完成的專案上增加Element-UI按需加載

開機時間還是太長，進一步縮小檔案，把Element-UI按需加載需安裝

除了原先的Element-UI安裝

npm install element-ui --save-dev

還需要以下安裝

npm install babel-plugin-component --save-dev

會問你是否全局載入還是按需載入，選按需載入時若是新專案會根目錄自動生成  babel.config.js及/src目錄app.vue，及plugins目錄內的element.js，原有專案會直接報錯 Token undefine，不理他後續說明

npm install babel-preset-env  --save-dev

npm install babel-plugin-component --save-dev

以下是檔案內容及修改main.js

改後 npm run build 即可發現檔案變小了！

babel.config.js

module.exports = {

  "presets": [

    "@vue/app"

  ],

  "plugins": [

    [

      "component",

      {

        "libraryName": "element-ui",

        "styleLibraryName": "theme-chalk"

      }

    ]

  ]

}

/src/plugins/element.js

import Vue from 'vue';

import { Col,Row,Button,Input,Dialog,Dropdown,DropdownItem,DropdownMenu } from 'element-ui';

Vue.use(Col);

Vue.use(Row);

Vue.use(Button);

Vue.use(Input);

Vue.use(Dialog);

Vue.use(Dropdown);

Vue.use(DropdownMenu);

Vue.use(DropdownItem);

main.js內改為按需載入

//import ElementUI from 'element-ui';   <==改為底下按需引入

import { Col,Row,Button,Input,Dialog,Dropdown,DropdownItem,DropdownMenu } from 'element-ui';

//Vue.use(ElementUI, { i18n: (key, value) => i18n.t(key, value), }); <==改為底下按需引入

Vue.use(Col, { i18n: (key, value) => i18n.t(key, value),});

Vue.use(Row, { i18n: (key, value) => i18n.t(key, value),});

Vue.use(Button, { i18n: (key, value) => i18n.t(key, value),});

Vue.use(Input, { i18n: (key, value) => i18n.t(key, value),});

Vue.use(Dialog, { i18n: (key, value) => i18n.t(key, value),});

Vue.use(Dropdown, { i18n: (key, value) => i18n.t(key, value),});Vue.use(DropdownItem, { i18n: (key, value) => i18n.t(key, value),});Vue.use(DropdownMenu, { i18n: (key, value) => i18n.t(key, value),});