在已经安装好 nuxt.js 中,先npm安装Element UI :
- npm i element-ui -S
再安装Element UI按需加载的一个依赖(全局引入不需要安装此插件):
- npm install babel-plugin-component -D
然后配置nuxt.config.js文件:
- vender:[
- 'element-ui'
- ],
- // 全局引入不需要babel这个对象
- babel:{
- "plugins": [["component", [
- {
- "libraryName": "element-ui",
- "styleLibraryName": "theme-default"
- },
- 'transform-async-to-generator',
- 'transform-runtime'
- ]]],
- comments: true
- },
- plugins: [
- { src: '~plugins/element-ui', ssr: true }
- ],
- css: [
- 'element-ui/lib/theme-chalk/index.css'
- ]
然后在plugins文件夹中创建 element-ui.js 文件,内容为:
- import Vue from 'vue'
- // 按需引用
- import { Button } from 'element-ui'
- Vue.component(Button.name, Button)
- // 全局引入为
-
import ElementUI from 'element-ui'
-
Vue.use(ElementUI)
完!