pc 端的项目,ui 推荐使用 element-ui。毕竟 element-ui 是基于 vue 的,契合度会更高一些。
element-ui 有两种引入方式:全部引入,和 按需引入。
全部引入
先安装:npm i element-ui -S
// main.js
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
全部引入,是把 element-ui 的所有模块都引入到项目中。但是,实际的使用中,并不会使用到所有模块,这个时候就会有资源浪费,最终打包的 vender.js 也会比较大。所以更加推荐按需引入,顾名思义,根据需要引入,用到哪个,引入哪个。
按需引入
安装: vue add element
如果项目中有未提交的文件,执行安装命令的时候,会有如下提示:
这个时候,建议大家,选 N,然后把未提交的文件 commit 之后,在执行命令。如果直接选择了Y,并且恰好 App.vue 文件有修改且没有提交,App.vue 文件会被覆盖。
选择引入方式。(Import on demand)
选择语言。(zh-CN)
安装成功之后,项目根目录中会多一个 babel.config.js 文件和 plugins 文件夹。如下:
plugins 文件夹中的 element.js 就是配置 element-ui 按需引入的文件。
文件中默认引入了 Button。之后,项目中需要什么组件,在 element.js 文件中配置即可。
最后,在 main.js 中引入 element.js 。
这里需要注意的是,element.js 和 main.scss 的引入顺序。这里推荐 main.scss 在 element.js 之后,原因是:在某些情况下,需要对 element-ui 的样式重写,main.scss 后引入,对之前的样式会覆盖,这样重写样式会比较容易。如果 main.scss 先引入,想要重写 element-ui 的样式,则需要计算权重,只有权重大于 element-ui 的权重,样式才会生效。
修改主题色
element-ui 使用较为明亮的蓝色作为主题色,但是作为一个成熟的系统,要学会拥有属于自己的颜色,这个时候,修改主题色,就是很好的解决方案。
这里只说项目中使用了 scss 修改主题色的情况,如果没有使用 scss,也想修改主题色,请参考官网的解决方案:https://element.eleme.cn/2.13/#/zh-CN/component/custom-theme
在 plugins 文件夹中,新建 element-variables.scss 文件,并在 element.js 中引入。然后在 element-variables.scss 文件中对 element-ui 中的变量重写,即可达到修改主题色,或者自定义主题的效果。
比如,想要修改主题色,只要对 $--color-primary 重新赋值就可以。如下:
// element-variables.scss
/* 改变主题色变量 */
$--color-primary: #1CB19D;
/* 改变 icon 字体路径变量,必需 */
$--font-path: '~element-ui/lib/theme-chalk/fonts';
@import "node_modules/element-ui/packages/theme-chalk/src/index";
这里需要注意的是,覆盖字体路径变量是必需的,将其赋值为 Element 中 icon 图标所在的相对路径即可。
// element.js
import Vue from 'vue'
import { Button, Link } from 'element-ui'
import './element-variables.scss'
Vue.use(Button)
Vue.use(Link)
以上,就实现了把主题色由 #409eff 改成了 #1cb19d。
如果想要修改其他颜色,同样对变量重新赋值就可以了。element-ui 全部的变量,可参照:https://github.com/smile1828/element/blob/dev/packages/theme-chalk/src/common/var.scss
项目地址:
系列文章:
vue-cli3+ 搭建pc端管理项目(二, 不同环境配置[开发,测试,生产])