# vue3-pc-template

**Repository Path**: mj-project/vue3-pc-template

## Basic Information

- **Project Name**: vue3-pc-template
- **Description**: PC端后台管理项目模板 - Vue3版
- **Primary Language**: TypeScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 4
- **Created**: 2023-02-08
- **Last Updated**: 2025-04-24

## Categories & Tags

**Categories**: Uncategorized

**Tags**: TypeScript, Vue, Element-UI, Pinia, admin

## README

# PC 端项目模板

## 原框架

[lyt-Top / vue-next-admin-template](https://gitee.com/lyt-top/vue-next-admin/tree/vue-next-admin-template/)

## 技术栈

* Vue3 + TypeScript + Element-plus + Vite + Pinia + Mock

## 运行截图

![登录页面](src/assets/images/doc/login_page.png)

![系统首页](src/assets/images/doc/home_page.png)

![角色管理](src/assets/images/doc/role_page.png)

![用户管理](src/assets/images/doc/user_page.png)

![表格页面](src/assets/images/doc/table_page.png)

## 使用说明

注意：要求 Node 版本 16+，建议使用 [nvm](https://github.com/nvm-sh/nvm#installing-and-updating) 进行本地 Node 版本管理

```bash
# 克隆项目
git clone https://gitee.com/mj-project/vue3-pc-template.git

# 进入项目
cd vue3-pc-template

# 安装依赖
npm install

# 运行项目
npm run dev

# 打包发布
npm run build
```

## 使用要点

* 自定义 Vue 指令的应用层级注册流程

```
1. 先在 src/directive/index.ts 中统一引入所有自定义指令，并封装在一个初始化函数 directive 内；
2. 后在 src/main.ts 中引入上述的 directive 函数，调用并传入参数 app (Vue 实例)，即可完成自定义指令的注册。
```

* 页面变量的管理方案

```
1. const state = reactive({ ... }); // 页面变量都存放在 state 对象里（非强制要求）
2. return { ...toRefs(state) }; // 可以通过 toRefs() 把 state 对象里的变量做响应式解构
```

* TagView 缓存 & TagsView 缓存

```
1. TagView 缓存 -> 指的是缓存单个 TagView 内部所有的状态，由该 Tagview 对应的路由配置 meta.isKeepAlive 控制；
【注意】组件 script 标签中的声明的 name 要与 route.ts 路由数组中声明的 name 一致。
2. TagsView 缓存 -> 指的是缓存当前已打开的 TagView 列表到 SessionStorage 里，以便用户刷新浏览器页面后能恢复，由 themeConfig.isCacheTagsView 控制；
【注意】仅能缓存已打开的 TagView 列表，TagView 内部的状态会因为刷新了浏览器页面而被重置。
```

* 用户信息模拟数据

```
/**
 * @params userName: 用户名
 * @params photo: 用户头像
 * @params time: 登录时间
 * @params roles: 用户角色(路由权限)
 * @params authBtnList: 按钮权限数组(控制按钮或者组件的权限)
 */
```

* 路由 meta 对象参数说明

```
meta: {
  id:           路由 id，必须唯一（用于动态角色权限控制路由）
  title:        菜单栏及 tagsView 栏、菜单搜索名称
  isLink:       是否超链接菜单，开启外链条件，`1、isLink: 链接地址不为空 2、isIframe:false`
  isHide:       是否隐藏此路由
  isKeepAlive:  是否缓存 tagsView 状态
  isAffix:      是否固定在 tagsView 栏上
  isIframe:     是否内嵌窗口，开启条件，`1、isIframe:true 2、isLink：链接地址不为空`
  roles:        当前路由的角色权限标识，控制路由显示、隐藏（用于固定角色权限控制路由）
  icon:         菜单、tagsView 图标 -> 阿里：加 `iconfont xxx`；fontawesome：加 `fa xxx`；element：加 `ele-Xxx`；
}
```

* 固定角色权限控制路由

```
1. 涉及到路由的 meta.roles 和用户的 userinfo.roles；
2. 实现原理是用 meta.roles 对比 userinfo.roles，只要有一个元素重合就说明用户拥有该路由的访问权限。
```

* 动态角色权限控制路由

```
1. 需要后端建立【角色 role <=> 路由 id】的映射表，一般是一个角色 role 对应多个路由 id；
2. 实现原理是在系统初始化时，把用户的所有角色（即 roles）发给后端，后端查表后返回对应的路由 id 列表，最后系统根据这些 id 去加载对应的路由。
```

* 控制按钮或者组件的访问权限（三种方式）

```
1. 函数方式：/src/utils/authFunction.ts
2. 指令方式：/src/directive/authDirective.ts
3. 组件方式：/src/components/auth/auth.vue、authsSig.vue、authsAll.vue
```

## 更新日志

* [点我查看版本变化记录](https://gitee.com/mj-project/vue3-pc-template/blob/master/CHANGELOG.md)