Nuxt.js 整合 ElementUI-蒲公英云

Nuxt.js 整合 ElementUI

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

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

npm i element-ui -S

安装成功后查看package.json是否有相关依赖配置

以插件方式引入ElementUI：创建plugins/element-ui.js

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

在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) {
    }
}