nuxt.js中按需加載 element-ui遇到的問題

1. 下載element-ui

npm i element-ui -S

2. 在～/plugins/下 新建一個名爲 element-ui.js文件

import Vue from 'vue'
import {form, input, formItem, button, message} from "element-ui";
Vue.use(form);
Vue.use(formItem);
Vue.use(input);
Vue.use(button);

Vue.prototype.$message = message;

3. 在～/nuxt.config.js中加入此：

plugins: [
        {src: '@/plugins/element-ui', ssr: true},
    ],
build: {
	// 按需引入element-ui的css等組件文件
    extractCSS: true,
    vendor: ['element-ui'],
    productionSourceMap: false,
    productionGzip: true,
    productionGzipExtensions: ['js', 'css', 'svg'],
    babel: {
        plugins: [
            ["component", {"libraryName": "element-ui", "styleLibraryName": "theme-chalk"}]
        ]
    },
}

ok ,開心使用

注意點：

1. 在element-ui.js中引入 message的時候：

import Vue from 'vue'
import {message} from "element-ui";
Vue.prototype.$message = message;

2. 按需加載element-ui的時候需要babel,

出錯的話再安裝（ps:我的有時候出錯）

npm install babel-plugin-component -D