27、Nuxt.js项目整合ElementUI组件库

bus_lupe2023-11-26 23:39

参考element-ui官网安装组件库

项目中新建插件引入element-ui

plugins\element-ui.js

javascript 复制代码

import Vue from 'vue';
import ElementUI from 'element-ui';

Vue.use(ElementUI);

nuxt.config.js

javascript 复制代码

  plugins: [
    "@/plugins/element-ui.js"
  ],
  build: {
    // 将位于 node_modules 目录下的element-ui导出
    transpile: [/^element-ui/],
    /*
    ** webpack 自定义配置
    */
    extend (config, ctx) {
    }
  }

引入element-ui css样式

nuxt.config.js

javascript 复制代码

/*
** 全局引入样式
*/
css: [
  // 针对 element-ui 组件的各种样式
  'element-ui/lib/theme-chalk/index.css',
  'element-ui/lib/theme-chalk/display.css'
],