首先你要知道 nuxt.js怎么引入第三方插件 ；
一、按需引入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) {
}
}
}
二、自定义主题色
引入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官方文档
---------------------分割线-------------------
三、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啦
