样式及二次开发

样式构成

GraceVueAdmin 组件和布局基于 Element Plus,并在其基础上增加了部分自定义样式( 对 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 目录覆盖更新到您的项目内即可。