# template-web-admin-vue3

**Repository Path**: justsosu/template-web-admin-vue3

## Basic Information

- **Project Name**: template-web-admin-vue3
- **Description**: 后台管理系统模板项目 内置表单配置化、表格配置化、路由与菜单去冗余配置化、权限配置、布局配置等
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-04-17
- **Last Updated**: 2026-01-10

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# ${chineseName}

${description}

## 安装

```bash
pnpm install
```

## 构建

### 开发启动

```bash
pnpm run dev
```

### 测试环境打包

```bash
pnpm run build:test
```

### 正式环境打包

```bash
pnpm run build
```

## 项目运行时关键配置

见[@/config](./src/config/index.ts),不依赖src其他模块，避免循环依赖, 修改@全员

## 图片

在[@/assets/images](./src/assets/styles)

## 样式

在[@/assets/styles](./src/assets/styles)

## 与编译后html文件同级

在[./public](./public)

## 组件

命名以PascalCase(大驼峰)
https://cn.vuejs.org/guide/essentials/component-basics.html

## 页面

### 页面创建

在[@/pages](./src/pages/)下创建，一个模块对应一个文件夹，文件夹下面自己再规划

### 页面路由配置

见[路由](#router)

## <span id="router">路由</span>

### 路由配置

在[@/router/modules](./src/router/modules)下创建一个[模块名].ts，（模块名同[@/pages/]下同名页面模块名，），
在[@/router/modules/index.ts](./src/router/modules/index.ts)统一导出

### 导航守卫设置

#### 全局导航首位设置

见[@/router/guard](./src/router/guard/index.ts)，每个拦截的行为各自创建文件夹，在[@/router/guard](./src/router/guard/index.ts)中应用

## 仓库

### user仓库

见[@/store/user/ts](./src/store/user.ts),涉及用户登录、登出等用户相关主流程方法

### app仓库

见[@/store/app.ts](./src/store/app.ts),涉及应用布局及设备相关[暂未完善]

### global-modal仓库

见[@/store/global-modal](./src/store/global-modal.ts),全局弹窗仓库，支持的全局弹窗枚举需要拓展，且需要在AppGlobalModal里面注册对应的枚举

## api

### 创建

一个模块一个文件，文件内部参考[@/api/common.ts](./src/api/common.ts);

### 导出

见[具名导出与tree shaking](#modules)

### 请求前配置

在[@/api/request](./src/api/request.ts)中beforeRequest,详见签名

### 新业务场景全局处理

在[@/api/request](./src/api/request.ts)beforeError isBusinessError条件,详见签名
新业务场景请增加业务错误枚举 见[@/config](./src/config/index.ts)

## hooks

### 创建及导出

见[具名导出与tree shaking](#modules)

## utils

### utils/enums

见[@/utils/enums](./src/utils/enums.ts)
所有字典请用枚举，避免魔鬼数字

### 创建及导出

见[具名导出与tree shaking](#modules)

## <span id="modules">具名导出与tree shaking</span>

整个模块可以通过index.ts统一导出，推荐具名导出，如果多个模块导出，尽量避免出现默认导出，方便tree shaking

## plugins

见[@/utils/plugins](./src/plugins/index.ts)

### 创建及导出

见[具名导出与tree shaking](#modules)

### 单个模块变量导出

```ts
// module.ts
export const foo = () => {
  console.log("foo");
};

export const baz = () => {
  console.log("baz");
};
```

```ts
// index.ts
export * from "./module.ts";
```

### 模块引用

使用时模块路径直接写到@/utils,【不同于uni，uni小程序打包不支持tree shaking，原因：只是保持原路径编译未bundle】

```ts
import { foo, baz } from "@/xxxxxxxxx";
```

## eslint

问题如果必须屏蔽时，建议单行屏蔽，次之全文件屏蔽，如果需要全局屏蔽@全员