GraceVueAdmin 组件和布局基于 Element Plus,并在其基础上增加了部分自定义样式( 对 element plus 部分样式做了修正 )。
框架包含 :
element plus 默认声明了很多样式,如 : 颜色、尺寸、间距等等,他们以 css 变量形式定义,您可以通过控制台直观的找到他们。
步骤 : 谷歌浏览器 -> F12 打开控制台 -> 点击元素选择按钮随意选择某个元素 -> 切换到样式标签 -> 滚动到底部 :
为了保持主题及风格统一,我们建议您尽量使用这些 css 变量来定义自己的样式,这样当您修改主题样式时自定义样式也会跟随变化。如 :
为了您可以方便地进行框架升级,我们建议使用新增或者扩展的方式去修改、添加样式,建议是步骤 :
1. 在 /src/styles/ 目录下创建自己的 css 文件, 如 custom.css
2. 编写自定义样式,如 :
3. 在 /src/main.js 中加载自定义样式
4. 在组件中使用样式
不要修改 /src/gva 目录及目录下的文件,当 GraceVueAdmin、ElementPlus 等核心框架升级时您就可以对自己的项目进行无缝升级。
下载最新的 graceVueAdmin 框架, 将 /src/gva 目录覆盖更新到您的项目内即可。