# sample-project

**Repository Path**: yujie_dream_admin/sample-project

## Basic Information

- **Project Name**: sample-project
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 2
- **Created**: 2021-12-30
- **Last Updated**: 2022-01-05

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 技术栈

本项目使用 Vue 3 + Typescript + Vite + Ant Design Vue 开发, 由于 3x 版本还不稳定，所以本项目使用的是 2x 版本，具体参见[Ant Design Vue 2x 文档](https://2x.antdv.com/docs/vue/introduce-cn)

# store 的组织方式

处理方式基本和[paixin-home-page](https://git.paixin.com/paixin/front/paixin-home-page)项目相同，因为使用了 typescript 所以请务必建好类型后进行编码，以保证后续的开发体验和项目的可维护性。

# localstorage 的组织方式

处理方式基本和[paixin-home-page](https://git.paixin.com/paixin/front/paixin-home-page)项目相同，因为使用了 typescript 所以请务必建好类型后进行编码，以保证后续的开发体验和项目的可维护性。

# css 样式

本项目使用了 BEM 的 css 命名规范，最大化避免了样式冲突问题，具体规范文档参照[CSS 命名规范-BEM](https://www.bemcss.com/), 为了方面编码，项目中使用了 scss 的 mixin 进行样式的书写，项目中所有的 scss 样式帮助 mixin 和 functions 文档请查阅[Sassmagic 文档](http://w3cplus.github.io/SassMagic/)

# router 的组织方式

本项目所有路由(除了一些初始的基础路由，见`@/router/initRoute.ts`)都是根据后端数据动态生成的。相关生成路由的帮助函数见`@/utils/routeHelper.ts`。

如果需要添加或删除路由，本地测试的话可以尝试在`@/router/initRoute.ts`下添加测试，测试完毕后，需要登陆管理系统在用户中心的菜单管理中先添加相应路由信息，然后退出重新登陆即可添加相应路由，记得删除`@/router/initRoute.ts`中的测试路由

# 权限相关

本项目所有用户权限都存储在 localstorage 的`actionList`中，可使用`useBtnPermission`拿到`hasPermission`函数检验用户是否具有指定权限，也可使用指令`v-perm`来直接控制界面上的一些权限需求。

# 接口请求相关

本项目重写了 axios 的一些类型定义, 添加了一些诸如`isMock`,`isAuth`等配置项具体类型定义参照`#/axios`

`isMock`: 是否使用`@/config/index.ts`中配置的 mock 接口地址进行接口请求, 生产环境会忽略此配置项，直接使用生产环境配置的地址。

`isAuth`: 此接口是否是要 token 验证，默认为 `true`。

# 标准布局模板
见`template/`下的txt文件，通用标准的最简页面可以参照`用户中心-权限配置-用户管理`页面