Vue3+TS后台管理系统 - 模板
gitee链接
技术栈
- 框架 Vue3全家桶+ts
- 工程化环境 vite
- 状态管理工具 pinia
- pinia持久化存储技术
- 包管理工具 pnpm
- 代码校验工具eslint+prettier
- 请求工具 axios
- UI组件库 element-plus
- css预编译 scss
- scss全局变量技术
- svg雪碧图技术 vite-plugin-svg-icons
- 组件设置name vueSetupExtend技术
- 全局组件自动注册技术 unplugin-auto-import/vite+unplugin-vue-components/vite
- 注册自定义插件技术 use自己的全局方法
- hooks函数
- 递归组件技术自动生成左侧菜单栏
- transition动画技术
首页样式
使用介绍
项目基础配置src/setting
左侧菜单栏中logo 项目名称 是否显示logo
统一在src/setting中配置, 已封装完成, 到时直接使用即可
路由篇 src/router
1. 配置地址
配置路由这里 将routes数组单独封装到routers.ts中,以后需要配置路由只需要在src/router/routers中配置即可
2. 路由配置介绍
3. 路由守卫
src/setting
配置前置已经后置守卫功能 区分登录或未登录的状态 进行限制访问
后置守卫中增加title功能 随着路由的变化动态显示
网络请求篇src/utils/request
1. axios拦截器
请求拦截器: 全局携带token =>token建议在store中取,配合上pinia持久化技术
响应拦截器:
成功=>
response.data 剥离一层响应成功的数据
处理请求成功, 业务失败的业务,例如登录时,密码输入错误 请求成功,但是业务失败,可以通过code状态码来做判断
失败=>
通过console.dir(error)查看所以错误的请求信息
token过期(401) 清除登录状态=> 回到登录页
请求错误统一提示 => 利用Message.error(返回的错误massage信息)
2. 利用ts对axios进行二次封装
开发中利用未封装的axios进行请求一次,知晓通过结构一层后最外面的数据字段, 根据字段对
下图红框处进行实际处理
根据二次封装的axios 对接口api进行集中管理
src/api
如果是get请求,可以不写 axios默认支持get请求
对数据定义类型 统一在src/types中创建xxx.d.ts分模块进行类型定义
全局状态管理篇 src/stores
优势:
调用非常方便,可节省大量的组件通讯代码,通过调用函数或者取对象值的方式将信息全局使用
1. 注意事项
1)参照已有的模块进行cv 注意需要自行修改变量名以及在return中将所有的变量以及方法进行返回
如果要开启自动本地持久化存储,需要加上
// {
// // 存储时持久化到本地, 默认是使用localStorage
// persist: true
// }
2)如果要删除某个变量信息以及本地存储,直接赋值未空或者undefined即可,本地会随着仓库的变化而自动变化,不需要手动remove
3)在store下的index.ts中需要导入新增的模块
// 直接导出 模块中的所有成员
// * 指的是模块中的所有成员
// export * from '模块路径'
2. 使用方法
// 例如A组件调用
const stroe = useUserStore()
console.log(store.变量A) 在模板中使用同理
store.setUserInfo(可传参)
注册全局组件
此项目在src/components下注册全局组件不需要额外自行全局注册! 模板中直接使用即可
要让全局组件具备类型,需要在types/components.d.ts中进行类型定义,参照文件上文导入后cv即可
Layout介绍
1. 说明
Layout是整个项目的架子, 包含项目的左侧菜单,头部导航以及主体二级路由出口
logo =====> 菜单栏logo以及项目名称 在setting.ts文件中自定义修改
menu =====> 左侧菜单栏 详见下文
mian =====> 二级路由出口
tabber =====> 头部导航栏 包含面包屑 刷新|全屏|设置|等出功能
index.vue =====> Layout入口文件
2. menu组件的使用
此组件已封装完成, 开发中只需在src/routers中配置路由信息即可,menu会根据配置的路由表动态生成左侧菜单
修改选中颜色,菜单栏背景颜色 需在Layout/index.vue中对el-menu菜单组件按照文档进行配置即可,我这里已经写好,有需要可以直接修改属性
<el-menu
background-color="#001529"
text-color="#fff"
router
active-text-color="pink"
:default-active="$route.path"
:collapse="settingStore.fold"
:collapse-transition="false"
>
若要修改整个菜单栏背景 还需要在styles/variable.scss对$base-menu-background变量进行修改
注意*
每个路由信息都需要添加上对应的元信息=>也就是mate中的内容
3. 菜单栏左侧svg使用
需要下载svg图 推荐iconfont 按照ui图进行下载svg即可
若要跳转icon大小 需要在Layout/menu/index.vue中对svg大小自行设置即可,目前已经在组件中写好
// Latout/menu/index.vue
<style lang="scss" scoped>
::v-deep() {
.svg {
font-size: 20px !important;
margin-right: 5px;
}
}
</style>
SvgIcon全局组件使用
-
下载svg图,并进行名字修改
-
例如login中需要使用eye-off图标进行编辑及存放svg
-
使用
<SvgIcon name="login-eye-off" width="xx" height="xx" color="xx"/> -
SvgIcon支持class 设置font-size直接调整大小,如果大家正好不知道而且有兴趣了解如何封装的,可以看一下我的这篇文章,包含vue2以及vue3的封装雪碧图的详细说明. 手摸手，带你优雅的使用 SvgIcon
备注: 如果color不生效, 可以在iconfont上下载指定的颜色再使用即可,如下图👇
