# ant-design-backend-template

**Repository Path**: free_pan/ant-design-backend-template

## Basic Information

- **Project Name**: ant-design-backend-template
- **Description**: ANTD风格的后台管理系统模板
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 1
- **Created**: 2023-09-05
- **Last Updated**: 2024-11-11

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# ANTD风格的后台管理系统模板

## 主要技术依赖

- vue 3.x
- vue-request 1.x
- vue-router 4.x
- pinia 2.x
- pinia-plugin-persist 1.x
- tailwind
- element-plus 2.x
- @vueuse/core 9.x
- @vueuse/motion 2.x-beta
- animate.css 4.x
- axios 1.x
- dayjs 1.x
- js-cookie 3.x
- lodash-es 4.x
- vxe-table 4.x
- jest 29.x
- xe-utils 3.x: xe-utils 是 vxe-table 的依赖，项目中需要使用辅助方法，请优先使用 lodash-es 提供的

## 工程化特性

- 集成 sass, postcss-preset-env, stylelint 用于自动统一css格式化风格和优化最终产出的css样式
- 集成 eslint和pretter 用于自动统一js,ts,vue的代码格式化风格
- 集成 commitlint 自动对 git commit 信息进行格式验证，用于统一 git commit 的格式
- 集成 standard-version，用于规范化生成 CHANGELOG
- 集成 vite-plugin-inspect 插件，可以看到每个插件对源文件都做了哪些修改
- 已配置打包优化

## vite集成插件相关说明

- 集成 unplugin-vue-components 插件，会对 src/components 目录下的文件进行全局按需引入
- 集成 unplugin-vue-components 插件，会对 element-plus 组件自动引入
- 集成 vite-plugin-style-import 插件，解决 Message 这类组件无法自动引入问题
- 集成 vite-plugin-svg-icons 插件，配合 src/components/SvgIcon.vue 文件，可以直接使用 src/assets/svg 目录下的 svg 文件
- 集成 rollup-plugin-visualizer 插件，用于对打包结果进行包分析
- 集成 plugin-legacy 插件，解决 chrome 低版本兼容问题
## scripts 说明

- dev: 本地启动 vite 服务
- build: 本地打包
- preview: 对本地打包的结果进行预览
- format: 使用 prettier 对代码进行格式化
- eslint-fix: 使用 eslint 对代码进行静态检查，并自动修复错误
- test: 执行 jest 测试
- test-c: 生成 jest 测试报告
- git-commit: 用于代替 git commit，用于输出格式标准的 commit 信息
- release: 打版本，生成 CHANAGELOG
- release-major: 更新主版本号，并生成 CHANAGELOG
- release-minor: 更新次版本号，并生成 CHANAGELOG
- release-patch: 更新补丁版本号，并生成 CHANAGELOG

## 配置文件说明

- .commitlintrc.cjs/.versionrc.cjs/changelog.config.cjs: git commit 和 changelog 配置相关文件
- .eslintignore/.eslintrc.cjs: eslint 配置相关文件
- .prettierignore/.prettierrc: perttier 配置相关文件
- postcss.config.cjs: postcss 配置文件
- tsconfig.json/tsconfig.node.json: ts 配置文件
- vite.config.ts: vite 配置文件
- components.d.ts: unplugin-vue-components 组件自动生成/修改的文件，从该文件中可以得知，哪些组件被自动全局按需引入了
- vite-env.d.ts: vite 相关的 ts 配置文件。如需配置全局属性的 ts 声明或.env 文件的属性/类型声明，则在此文件中完成
- src/routes/index.ts: vue-router 配置文件，路由和路由守卫的入口文件

## 后端服务 api 代理配置

1. 在`.env`和`.env.production`的`VITE_PROXY_TARGET`分别配置本地开发和生产环境的后端 api 地址
2. 去掉`vite.config.ts`中的`server.proxy`配置. `rewrite`的配置需要根据实际情况修改

## 浏览器兼容

默认撇脂的浏览器兼容情况

- IE 浏览器不支持(基于 Chromium 的 Edge 除外)
- PC Chrome 69+
- PC Firefox 69+
- PC Safari 16.1+
- PC Opera 15+
- PC Chromium Edge 79+ (这是基于 Chromium 内核的 Edge 浏览器)
- Safari on iOS 12+
- Firefox for Android 107+
- Android Browser 107+
- Opera Mobile 72+
- Chrome for Android 108+