## 名称 Vue tuoren admin 血透管理系统 ## 简介 Vue Tuoren Admin 是一个中后台模版, `vue3`, `vite2`, `TypeScript` 等主流技术开发，开箱即用的中后台前端解决方案，也可用于学习参考。 ## 特性 - **最新技术栈**：使用 Vue3/vite4 等前端前沿技术开发 - **TypeScript**: 应用程序级 JavaScript 的语言 - **主题**：可配置的主题 - **国际化**：内置完善的国际化方案 - **Mock 数据** 内置 Mock 数据方案,已使用 apifox 进行替代 - **权限** 内置完善的动态路由权限生成方案 - **组件** 二次封装了多个常用的组件 [Document](https://doc.vvbin.cn/) ## 准备 - [node](http://nodejs.org/) 和 [git](https://git-scm.com/) -项目开发环境 - [Vite](https://vitejs.dev/) - 熟悉 vite 特性 - [Vue3](https://v3.vuejs.org/) - 熟悉 Vue 基础语法 - [TypeScript](https://www.typescriptlang.org/) - 熟悉`TypeScript`基本语法 - [Es6+](http://es6.ruanyifeng.com/) - 熟悉 es6 基本语法 - [Vue-Router-Next](https://next.router.vuejs.org/) - 熟悉 vue-router 基本使用 - [Ant-Design-Vue](https://2x.antdv.com/docs/vue/introduce-cn/) - ui 基本使用 - [Mock.js](https://github.com/nuysoft/Mock) - mockjs 基本语法 ## 安装使用 - 获取项目代码 ```bash git clone http://192.168.100.32:3000/fanfan/xt-front.git ``` - 安装依赖 ```bash cd xt-front pnpm install ``` - 运行 ```bash pnpm run serve ``` - 打包 ```bash pnpm build ``` ## npm script ```bash "scripts": { # 安装依赖 "bootstrap": "yarn install", # 运行项目 "serve": "npm run dev", # 运行项目 "dev": "vite", # 构建项目 "build": "vite build && esno ./build/script/postBuild.ts", # 清空缓存后构建项目 "build:no-cache": "yarn clean:cache && npm run build", # 生成打包分析，在 `Mac OS` 电脑上执行完成后会自动打开界面，在 `Window` 电脑上执行完成后需要打开 `./build/.cache/stats.html` 查看 "report": "cross-env REPORT=true npm run build", # 类型检查 "type:check": "vue-tsc --noEmit --skipLibCheck", # 预览打包后的内容（先打包在进行预览） "preview": "npm run build && vite preview", # 直接预览本地 dist 文件目录 "preview:dist": "vite preview", # 生成 ChangeLog "log": "conventional-changelog -p angular -i CHANGELOG.md -s", # 删除缓存 "clean:cache": "rimraf node_modules/.cache/ && rimraf node_modules/.vite", # 删除 node_modules (`window` 系统手动删除该目录较慢，可以使用该命令来进行删除) "clean:lib": "rimraf node_modules", # 执行 eslint 校验，并修复部分问题 "lint:eslint": "eslint \"{src,mock}/**/*.{vue,ts,tsx}\" --fix", # 执行 prettier 格式化（该命令会对项目所有代码进行 prettier 格式化，请谨慎执行） "lint:prettier": "prettier --write --loglevel warn \"src/**/*.{js,json,tsx,css,less,scss,vue,html,md}\"", # 执行 stylelint 格式化 "lint:stylelint": "stylelint --fix \"**/*.{vue,less,postcss,css,scss}\" --cache --cache-location node_modules/.cache/stylelint/", "lint:lint-staged": "lint-staged -c ./.husky/lintstagedrc.js", "lint:pretty": "pretty-quick --staged", # 对打包结果进行 gzip 测试 "test:gzip": "http-server dist --cors --gzip -c-1", # 对打包目录进行 brotli 测试 "test:br": "http-server dist --cors --brotli -c-1", # 重新安装依赖，见下方说明 "reinstall": "rimraf yarn.lock && rimraf package.lock.json && rimraf node_modules && npm run bootstrap", "install:husky": "is-ci || husky install", # 生成图标集，见下方说明 "gen:icon": "esno ./build/generate/icon/index.ts", "postinstall": "npm run install:husky" }, ``` ## 目录说明 ```bash . ├── build # 打包脚本相关 │   ├── config # 配置文件 │   ├── generate # 图标生成器,基本使用 antdesign 和 iconfont 上图标 │   ├── script # 脚本 │   └── vite # vite配置 ├── mock # mock文件夹/使用 apifox 进行替代 ├── public # 公共静态资源目录 ├── src # 主目录 │   ├── api # 接口文件 │   ├── assets # 资源文件 │   │   ├── icons # icon sprite 图标文件夹 │   │   ├── images # 项目存放图片的文件夹 │   │   └── svg # 项目存放svg图片的文件夹 │   ├── components # 公共组件 │   ├── design # 样式文件 │   ├── directives # 指令 │   ├── enums # 枚举/常量 │   ├── hooks # hook │   │   ├── component # 组件相关hook │   │   ├── core # 基础hook │   │   ├── event # 事件相关hook │   │   ├── setting # 配置相关hook │   │   └── web # web相关hook │   ├── layouts # 布局文件 │   │   ├── default # 默认布局 │   │   ├── iframe # iframe布局 │   │   └── page # 页面布局 │   ├── locales # 多语言 │   ├── logics # 逻辑 │   ├── main.ts # 主入口 │   ├── router # 路由配置 │   ├── settings # 项目配置 │   │   ├── componentSetting.ts # 组件配置 │   │   ├── designSetting.ts # 样式配置 │   │   ├── encryptionSetting.ts # 加密配置 │   │   ├── localeSetting.ts # 多语言配置 │   │   ├── projectSetting.ts # 项目配置 │   │   └── siteSetting.ts # 站点配置 │   ├── store # 数据仓库 │   ├── utils # 工具类 │   └── views # 页面 │   ├── bus # 业务页面 │   ├── sys # 系统页面 ├── test # 测试 │   └── server # 测试用到的服务 │   ├── api # 测试服务器 │   ├── upload # 测试上传服务器 │   └── websocket # 测试ws服务器 ├── types # 类型文件 ├── vite.config.ts # vite配置文件 └── windi.config.ts # windcss配置文件 ``` ## Git 贡献提交规范 - 参考 [vue](https://github.com/vuejs/vue/blob/dev/.github/COMMIT_CONVENTION.md) 规范 ([Angular](https://github.com/conventional-changelog/conventional-changelog/tree/master/packages/conventional-changelog-angular)) - `feat` 增加新功能 - `fix` 修复问题/BUG - `style` 代码风格相关无影响运行结果的 - `perf` 优化/性能提升 - `refactor` 重构 - `revert` 撤销修改 - `test` 测试相关 - `docs` 文档/注释 - `chore` 依赖更新/脚手架配置修改等 - `workflow` 工作流改进 - `ci` 持续集成 - `types` 类型定义文件更改 - `wip` 开发中 ## Related warehouse If these plugins are helpful to you, you can give a star support - [vite-plugin-mock](https://github.com/anncwb/vite-plugin-mock) - Used for local and development environment data mock - [vite-plugin-html](https://github.com/anncwb/vite-plugin-html) - Used for html template conversion and compression - [vite-plugin-style-import](https://github.com/anncwb/vite-plugin-style-import) - Used for component library style introduction on demand - [vite-plugin-theme](https://github.com/anncwb/vite-plugin-theme) - Used for online switching of theme colors and other color-related configurations - [vite-plugin-imagemin](https://github.com/anncwb/vite-plugin-imagemin) - Used to pack compressed image resources - [vite-plugin-compression](https://github.com/anncwb/vite-plugin-compression) - Used to pack input .gz|.brotil files - [vite-plugin-svg-icons](https://github.com/anncwb/vite-plugin-svg-icons) - Used to quickly generate svg sprite ## 浏览器支持 ##测试Git 本地开发推荐使用`Chrome 80+` 浏览器 支持现代浏览器, 不支持 IE | [ Edge](http://godban.github.io/browsers-support-badges/)
IE | [ Edge](http://godban.github.io/browsers-support-badges/)
Edge | [Firefox](http://godban.github.io/browsers-support-badges/)
Firefox | [Chrome](http://godban.github.io/browsers-support-badges/)
Chrome | [Safari](http://godban.github.io/browsers-support-badges/)
Safari | | not support | last 2 versions | last 2 versions | last 2 versions | last 2 versions |