1.安装element-ui
npm i element-ui -S
npm install babel-plugin-component --save-dev
2.在 plugins 文件夹下新建 element-ui.js 文件
import Vue from 'vue';
import {Button} from 'element-ui';
const components=[
Button
]
const Element ={
install(Vue){
components.forEach(component=>{
Vue.component(component.name,component)
})
}
}
Vue.use(Element)
3.nuxt.config.js中配置
plugins:[ '@/plugins/element-ui',]
build: {
extractCSS: { allChunks: true },//查看网页源码,会有css样式,该代码可以去除css样式
babel: {
"plugins": [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
]
}
}
4.以上,重启项目即可
5.elementui使用的scss语言,所以要想修改element原样式,要安装scss
npm i node-sass sass-loader scss-loader --save-dev
6.在assets/css/scss中新建element-variables.scss
/* 改变主题色变量 */
/* 改变主题色变量aaa */
$--color-primary: #fcc900;
/* 改变 icon 字体路径变量,必需 */
$--font-path: '~element-ui/lib/theme-chalk/fonts';
//@import "~element-ui/packages/theme-chalk/src/index";
//以下是需要加载的组件的css
@import "~element-ui/packages/theme-chalk/src/button";
@import "~element-ui/packages/theme-chalk/src/link";
@import "~element-ui/packages/theme-chalk/src/form";
@import "~element-ui/packages/theme-chalk/src/form-item";
7.在plugins/element-ui.js中引入
import Vue from 'vue';
import {Button} from 'element-ui';
import '../assets/scss/element-variables.scss'
const components=[
Button
]
const Element ={
install(Vue){
components.forEach(component=>{
Vue.component(component.name,component)
})
}
}
Vue.use(Element)
这样就可以重新修改样式了。