用上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