Vue nuxt.js 中引入Element UI

在已经安装好 nuxt.js 中，先npm安装Element UI ：

1. npm i element-ui -S

再安装Element UI按需加载的一个依赖（全局引入不需要安装此插件）：

1. npm install babel-plugin-component -D

然后配置nuxt.config.js文件：

1. vender:[
2.   'element-ui'
3. ],
4. // 全局引入不需要babel这个对象
5. babel:{
6.   "plugins": [["component", [
7.     {
8.       "libraryName": "element-ui",
9.       "styleLibraryName": "theme-default"
10.     },
11.     'transform-async-to-generator',
12.     'transform-runtime'
13.   ]]],
14.   comments: true
15. },
16. plugins: [
17. { src: '~plugins/element-ui', ssr: true }
18. ],
19. css: [
20. 'element-ui/lib/theme-chalk/index.css'
21. ]

然后在plugins文件夹中创建  element-ui.js 文件，内容为:

1. import Vue from 'vue'
2.
3. // 按需引用
4. import { Button } from 'element-ui'
5. Vue.component(Button.name, Button)
6.
7. // 全局引入为
8. import ElementUI from 'element-ui'
9. Vue.use(ElementUI)
10.

完！