- 下载element-ui
npm i element-ui -S
- 在~/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;
- 在~/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 ,开心使用
注意点:
- 在
element-ui.js
中引入 message的时候:
import Vue from 'vue'
import {message} from "element-ui";
Vue.prototype.$message = message;
- 按需加载
element-ui
的时候需要babel,
出错的话再安装(ps:我的有时候出错)
npm install babel-plugin-component -D