Nuxt.js 整合 ElementUI

一时失言乱红尘 2024-04-17 06:14 59阅读 0赞

> 参考: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)

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

1.  重启项目

npm run dev