nuxt 自定义element主题颜色&在nuxt 中按需引入element

按需要引入elment
第一步：安装 babel-plugin-component：

npm install babel-plugin-component -D

第二步：修改plugins/element.js文件（默认nuxt 有个plugins文件夹，在这个文件夹下新建一个element.js文件）

import Vue from 'vue'

import { Button, Input } from 'element-ui'

Vue.use(Button)
Vue.use(Input)

第三步：添加nuxt.config.js中的build配置：

export default {
  build: {
　　// 按需引入element-ui
    babel: {
      plugins: [
        [ "component", {"libraryName": "element-ui",  "styleLibraryName": "theme-chalk"}] 
      ] 
    },
/*
    ** You can extend webpack config here
    */
    extend(config, ctx) {
    }
  }  
}

nuxt 自定义element主题颜

在assets文件下新建scss 文件 再建一个 element-variables.scss文件代码如下

/* 改变主题色变量 */
/* 改变主题色变量aaa */
$--color-primary: #7C75FF;

/* 改变 icon 字体路径变量，必需 */
$--font-path: '~element-ui/lib/theme-chalk/fonts';

@import "~element-ui/packages/theme-chalk/src/index"; // 这个地方后面要 改成 样式按需引入，请继续看下文

这个时候引入的方式有两种：一种是按照css 的方式引入，一种是按照插件的方式引入
按照css方式引入

nuxt.config.js文件
css: [
    { src: '~assets/scss/element-variables.scss', lang: 'scss'}
  ],

重新启动项目即可完成主题色修改

按照引入的插件的方式使用

上面在讲到按需引入element的时候新建的有个 plugins/element.js文件， 在element.js 文件中
import Vue from 'vue'
import { Pagination, Popover } from 'element-ui'
import '@/assets/scss/element-variables.scss' //  在这里引入scss

Vue.use(Pagination);
Vue.use(Popover );