Nuxt.js 中 全局（按需）引入 Element-ui 组件

1. 安装 element-ui

npm i element-ui -S

2. 安装依赖（按需引入才需要，全局不需要）

npm i -D babel-plugin-component
// or
yarn add -D babel-plugin-component

3. 在根目录下的plugins下创建element-ui.js文件

全局引入

import Vue from 'vue'
import Element from 'element-ui'

Vue.use(Element)

以下是按需引入例子，自己按实际情况引用

import Vue from 'vue'
import { Button, Select } from 'element-ui';

Vue.use(Button);
Vue.use(Select);

4. 然后将根目录下的nuxt.config.js文件修改为

修改plugins属性，引入css

plugins: [{ src: '@/plugins/element-ui', ssr: true }],
css: [
  'element-ui/lib/theme-chalk/index.css'
],

按需引入还需要在 build 中添加 babel 属性：

build: {
    vendor: ['element-ui'],
    babel: {
      plugins: [
        [
          'component',
          {
            libraryName: 'element-ui',
            styleLibraryName: 'theme-chalk'
          }
        ]
      ],
      comments: true
    },
}

5. 配置完成，可以在 .vue文件中使用了

觉得有帮助的小伙伴右上角点个赞~

扫描上方二维码关注我的订阅号~