Nuxt.js 整合 ElementUI

参考:https://element.eleme.cn/#/zh-CN/component/installation

1. 安装ElementUI，命令行进入项目根路径执行：

npm i element-ui -S

安装成功后查看package.json是否有相关依赖配置
2. 以插件方式引入ElementUI：创建plugins/element-ui.js

import Vue from 'vue'
import ElementUI from 'element-ui'
Vue.use(ElementUI)

3. 在nuxt.config.js内配置css,plugins,build如下：

 /*
    ** 引入全局样式
    */
    css: [
        'element-ui/lib/theme-chalk/index.css',
        'element-ui/lib/theme-chalk/display.css',
        //引用主题样式
        '@/assets/theme/index.css',
        '@/assets/css/global.css',
        //加上mavon-editor插件
        'mavon-editor/dist/css/index.css'
    ],
    /*
    ** Plugins to load before mounting the App
    */
    plugins: [
        '@/plugins/element-ui.js',
        '@/plugins/interceptor.js',
        '@/plugins/mavon-editor.js',
        '@api/article.js',
        '@api/question.js',
        '@api/common.js',
        '@api/user.js',
        //指定只在客户端使用
        {src: '~/plugins/mavon-editor.js', mode: 'client'},
    ],
    /*
    ** Nuxt.js dev-modules
    */
    buildModules: [],
    /*
    ** Build configuration
    */
    build: {
        /*
        ** 打包的时候将 位于 node_modules 目录下的 element-ui 一起导出
        */
        transpile: [/^element-ui/],

        /**
         * webpack 自定义配置
         * @param config
         * @param ctx
         */
        extend(config, ctx) {
        }
    }

4. 重启项目

npm run dev