用上Vue跟Element-UI搭档，我发现这样的组合，能让我在前端开发中更快地搞定好看的页面，效率可是提升不少！不过，随着项目的推进，我发现那些默认的主题样式有时候还真不够用，所以我得琢磨怎么自己来定制这些样式咯。
设置项目环境
安装好Element-UI后，得先确认下是不是已经顺利地引进到了项目里咯。就在那个main.js文件里面操作就好了。过程虽然简单，但没做对前面的步骤，后面啥都搞不成哇。
npm install element-ui
创建自定义主题
接下来，我就在项目里头的src/assets文件夹里建了个叫theme.scss的文件。然后用SASS的格式给它定制了一套主题样式。这整个过程，我是反复试啊试，不断调色换型儿，终于发现了调整颜色、字号这些基础属性能让组件看起来大不一样！
import Vue from 'vue' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI)
配置Webpack
搞定Webpack配置不是那么容易的，因为得去搞懂它怎么处理我的自定义主题样式文件。我就这么个步骤有些困惑，不过反复研究和请教朋友后还是应付过来了。具体就是在项目根目录下新建一个vue.config.js文件，然后做一点必要设置就行了。
应用自定义主题
// 主题颜色
$primary-color: #42b983;
// 按钮样式
.el-button {
background-color: $primary-color;
color: white;
// 鼠标悬停样式
&:hover {
background-color: darken($primary-color, 10%);
}
}
Webpack搞定之后，我就在App.vue文件里把自己特制的主题模式加进去了。就那么点儿事儿！就是把原来IElement-UI的按钮上的那些样式复制过来而已。看着它按照我设定的样子亮相出来，我心里那个美，骄傲得不得了！
测试和调整
module.exports = {
css: {
loaderOptions: {
sass: {
additionalData: `@import "@/assets/theme.scss";`
}
}
}
}
换上自定义主题后，我没马上停手，继续做了好多测试和微调。就想看看每个部件儿都好着没，有什么漏掉或者出错儿的地方。结果这一折腾，我才发现，哪怕只是随便改个小小颜色，也可能大大影响整个界面效果！
总结和反思
折腾这个自定义主题后，我对前端开发有了新认识。虽然遇到一堆困难，但最后的结果还是挺满意的。我会把项目做得更好，更符合客户的设计要求！
向读者提问
按钮.el-button { // 使用主题样式 @include theme(component, 'el-button'); }
大家是否遇到过这种情况？在弄自己的Vue跟Element-UI主题时有啥困难吗？你们都是怎么搞定的？记得来评论区说说你的经验心得，大家相互学习，共同提高~
npm run serve
评论0