前言
本系列文章是为了帮助没有直接上手（或上手比较困难）做项目能力的初级前端开发工程师采用 V3 Admin Vite 开源模板来编写业务代码。
如果你是一个有经验的朋友，那建议你直接阅读文档即可：V3 Admin Vite 中文文档，因为本系列教程节奏偏慢。
本系列文章的同步视频教程版本地址：B 站（群友好心录制）
文章目的
本文将教会你如何使用该平台内置的一些配置，比如和布局相关的隐藏标签栏、和路由相关的路由缓存、和样式相关的修改全局颜色。
Begin
布局配置
内置的能配置布局的内容大致是：
页面的右侧默认有一个设置按钮，如下图所示：
它是通过 CSS position: fixed + right: 0px 一直固定在右侧的，要关闭它不需要去修改源码，去 @/config/layout.ts 布局配置文件里将 showSettings 配置项的布尔值修改为 false 即可。
如下图所示，是点击设置按钮后展开的布局配置界面，所有内置的可配置的选项：
每个选项可以通过界面去配置，也可以直接修改他们对应的配置项，这些配置项也是在 @/config/layout.ts 中的，配置项和界面的对应关系如下：
因为这些配置比较简单，文章就不去截图它们每一个开关切换之后的效果了，大家可以本地运行或者直接去线上的预览地址查看效果：GitHub Page
路由菜单
路由的定义以及配置在 @/router/index.ts 文件里，比如登录路由配置：
{
path: "/login",
component: () => import("@/views/login/index.vue"),
meta: {
hidden: true
}
}
首先我们要了解一个基本的知识点：我们平台自定义的配置项都在 meta 属性下，而其他的比如 path、component、redirect、children、name 这些属性，是 vue-router 自带的，如果你还不了解它们各自代表什么意思，那你应该去 官网 查阅一下。
平台在 meta 属性下已经内置了这么多配置项了：
// 设置 noRedirect 的时候该路由在面包屑导航中不可被点击
redirect: 'noRedirect'
// 动态路由：必须设定路由的名字，一定要填写不然重置路由可能会出问题
// 如果要在 tags-view 中展示，也必须填 name
name: 'router-name'
meta: {
// 设置该路由在侧边栏和面包屑中展示的名字
title: 'title'
// 设置该路由的图标，记得将 svg 导入 @/icons/svg
svgIcon: 'svg name'
// 设置该路由的图标，直接使用 Element Plus 的 Icon（与 svgIcon 同时设置时，svgIcon 将优先生效）
elIcon: 'element-plus icon name'
// 默认 false，设置 true 的时候该路由不会在侧边栏出现
hidden: true
// 设置该路由进入的权限，支持多个权限叠加（动态路由才需要设置）
roles: ['admin', 'editor']
// 默认 true，如果设置为 false，则不会在面包屑中显示
breadcrumb: false
// 默认 false，如果设置为 true，它则会固定在 tags-view 中
affix: true
// 当一个路由下面的 children 声明的路由大于1个时，自动会变成嵌套的模式
// 只有一个时，会将那个子路由当做根路由显示在侧边栏
// 若想不管路由下面的 children 声明的个数都显示你的根路由
// 可以设置 alwaysShow: true，这样就会忽略之前定义的规则，一直显示根路由
alwaysShow: true
// 示例: activeMenu: "/xxx/xxx"
// 当设置了该属性进入路由时，则会高亮 activeMenu 属性对应的侧边栏
// 该属性适合使用在有 hidden: true 属性的路由上
activeMenu: '/dashboard'
// 是否缓存该路由页面
// 默认为 false，为 true 时代表需要缓存，此时该路由和该页面都需要设置一致的 Name
keepAlive: false
}
为了让编辑器对这些配置项有类型提示，平台还对它们进行了 TS 定义，放在了 @/types/vue-router.d.ts 文件下，如果你需要改造或者新增配置项，那你也应该同步修改这个文件！
它们的 TS 类型定义如下：
/**
* 设置该路由在侧边栏和面包屑中展示的名字
*/
title?: string
/**
* 设置该路由的图标，记得将 svg 导入 @/icons/svg
*/
svgIcon?: string
/**
* 设置该路由的图标，直接使用 Element Plus 的 Icon（与 svgIcon 同时设置时，svgIcon 将优先生效）
*/
elIcon?: string
/**
* 默认 false，设置 true 的时候该路由不会在侧边栏出现
*/
hidden?: boolean
/**
* 设置该路由进入的权限，支持多个权限叠加
*/
roles?: string[]
/**
* 默认 true，如果设置为 false，则不会在面包屑中显示
*/
breadcrumb?: boolean
/**
* 默认 false，如果设置为 true，它则会固定在 tags-view 中
*/
affix?: boolean
/**
* 当一个路由下面的 children 声明的路由大于 1 个时，自动会变成嵌套的模式，
* 只有一个时，会将那个子路由当做根路由显示在侧边栏，
* 若想不管路由下面的 children 声明的个数都显示你的根路由，
* 可以设置 alwaysShow: true，这样就会忽略之前定义的规则，一直显示根路由
*/
alwaysShow?: boolean
/**
* 示例: activeMenu: "/xxx/xxx"，
* 当设置了该属性进入路由时，则会高亮 activeMenu 属性对应的侧边栏。
* 该属性适合使用在有 hidden: true 属性的路由上
*/
activeMenu?: string
/**
* 是否缓存该路由页面
* 默认为 false，为 true 时代表需要缓存，此时该路由和该页面都需要设置一致的 Name
*/
keepAlive?: boolean
下面我们挑几个比较重要的配置讲一讲如何使用~
设置图标
以首页为例，假如不设置图标，那么 svgIcon 或 elIcon 属性就应该为空，像这样：
meta: {
title: "首页",
affix: true
}
效果如图：
Element Plus
假如想使用 Element Plus 的 Icon，那你应该去 官网 找一个符合要求的图标并复制它的名字
比如这个名为 House 的 Icon，我们直接用 elIcon 配置项使用它：
meta: {
title: "首页",
elIcon: "House",
affix: true
}
效果如图：
SVG
假如想使用本地的 SVG 图标，那你应该将静态资源复制到 @/icons/svg 目录下，比如这个名为 dashboard 的图标
我们直接用 svgIcon 配置项使用它：
meta: {
title: "首页",
svgIcon: "dashboard",
affix: true
}
效果如图：
设置缓存
设置路由缓存必须同时满足这四个条件：
- 路由
keepAlive为 true - 路由有
Name - 页面有
Name - 路由和页面 Name
保持一致
以表格路由为例：
{
path: "/table",
component: Layout,
redirect: "/table/element-plus",
name: "Table",
meta: {
title: "表格",
elIcon: "Grid"
},
children: [
{
path: "element-plus",
component: () => import("@/views/table/element-plus/index.vue"),
name: "ElementPlus",
meta: {
title: "Element Plus",
keepAlive: true
}
},
{
path: "vxe-table",
component: () => import("@/views/table/vxe-table/index.vue"),
name: "VxeTable",
meta: {
title: "Vxe Table",
keepAlive: true
}
}
]
}
可以看见两个路由的 Name 分别是 ElementPlus 和 VxeTable，我们还需要去对应的页面上配置相同的 Name：
完成这些配置之后，我们就可以验证一下缓存是否生效了。
我们去页面上输入一些筛选条件，然后切换到其他页面再切换回来发现这些数据还在就表示缓存成功了：
全局样式
全局样式相关的的文件，全都在 @/styles 目录下
简单介绍一下：
vxe-table.scss：这里可以写样式来覆盖 vxe-table 原本的样式
element-plus.scss：这里可以写样式来覆盖 element-plus 原本的样式
transition.scss： 这里可以写动画相关的样式
mixins.scss：这里可以写和 scss mixin 相关的样式
variables.css：这里是本项目内置的一些比较重要的和布局、颜色相关的全局样式
index.scss：这里是所有样式的入口，也可以写样式来覆盖原生 html 的样式
theme： 这里是多主题模式相关的样式文件，目前内置了黑暗模式、深蓝色模式
多主题模式的 theme 目录后续会单独出一篇文章（教程八），这里就不展开了，
我们简单演示一下修改 variables.css 的效果：
/** 全局 CSS 变量，这种变量不仅可以在 CSS 和 SCSS 中使用，还可以导入到 JS 中使用 */
:root {
/** 全局背景色 */
--v3-body-bg-color: #f2f3f5;
/** Header 区域 = NavigationBar 组件 + TagsView 组件 */
--v3-header-height: calc(var(--v3-navigationbar-height) + var(--v3-tagsview-height));
/** NavigationBar 组件 */
--v3-navigationbar-height: 50px;
/** Sidebar 组件 */
--v3-sidebar-width: 220px;
--v3-sidebar-hide-width: 58px;
--v3-sidebar-menu-item-height: 60px;
--v3-sidebar-menu-tip-line-bg-color: var(--el-color-primary);
--v3-sidebar-menu-bg-color: #001428;
--v3-sidebar-menu-hover-bg-color: #ffffff10;
--v3-sidebar-menu-text-color: #c0c4cc;
--v3-sidebar-menu-active-text-color: #ffffff;
/** SidebarLogo 组件 */
--v3-sidebarlogo-bg-color: #001428;
/** TagsView 组件 */
--v3-tagsview-height: 34px;
--v3-tagsview-tag-text-color: #495060;
--v3-tagsview-tag-active-text-color: #ffffff;
--v3-tagsview-tag-bg-color: #ffffff;
--v3-tagsview-tag-active-bg-color: var(--el-color-primary);
--v3-tagsview-tag-border-radius: 2px;
--v3-tagsview-tag-border-color: #d8dce5;
--v3-tagsview-tag-active-border-color: var(--el-color-primary);
--v3-tagsview-tag-active-before-color: #ffffff;
--v3-tagsview-tag-icon-hover-bg-color: #00000030;
--v3-tagsview-tag-icon-hover-color: #ffffff;
/** RightPanel 组件 */
--v3-rightpanel-button-bg-color: #001428;
}
将上面的全局背景色灰白色 --v3-body-bg-color: #f2f3f5 改成黑色 #000000 后效果如下
其他的样式就大家自己用到的时候再去修改后查看效果了。
如果你想知道某个样式是什么作用，可以直接看注释和命名，因为项目本身还是非常规范的，这两点已经满足大部分人了。也可以直接复制变量名在编辑器里搜索，就能查看到该变量在什么地方用到了。
End
本系列所有手摸手教程
V3 Admin Vite 相关链接
掘金
本文正在参加「金石计划」
