nuxt按需引入 element-UI、自定義主題色（終極按需引入）

首先你要知道 nuxt.js怎麼引入第三方插件 ；

很少BB。

1、按需引入element-UI

第一步：安裝 babel-plugin-component：

npm install babel-plugin-component -D

第二步：修改plugins/element.js文件（plugins/element.js不知道怎麼來的？出門左拐不送 nuxt.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) {
    }
  }  
}

 

2、自定義主題色

引入element-UI以後，在 /assets/scss 下新建一個 element-variables.scss 文件，文件名應該是能夠本身隨便取

 

element-variables.scss：

/* 改變主題色變量aaa */
$--color-primary: green;

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

@import "~element-ui/packages/theme-chalk/src/index"; // 這個地方後面要 改爲 樣式按需引入，請繼續看下文

 

而後就能夠了，終於看到期待已久的綠色：

綠意盎然，心花盛開。

想了解更多請移步element-UI官方文檔

 

 

 ---------------------分割線-------------------

 

3、element-UI樣式按需引入（終極按需引入）

剛纔研究了一下，以上按需引入只是按需引入組件，可是element的樣式仍是所有引入了，沒有作好按需引入樣式，因此樣式也按需引入一下：

在element-variables.scss裏面按需引入樣式：

/* 改變主題色變量aaa */
$--color-primary: green;

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

// @import "~element-ui/packages/theme-chalk/src/index";

// 樣式也按需引入，嘿嘿嘿
@import "~element-ui/packages/theme-chalk/src/button"; @import "~element-ui/packages/theme-chalk/src/input";

 

打包體積又能夠減少幾十k啦