xt-front

名称

Vue tuoren admin 血透管理系统

简介

Vue Tuoren Admin 是一个中后台模版, vue3, vite2, TypeScript 等主流技术开发，开箱即用的中后台前端解决方案，也可用于学习参考。

特性

• 最新技术栈：使用 Vue3/vite4 等前端前沿技术开发
• TypeScript: 应用程序级 JavaScript 的语言
• 主题：可配置的主题
• 国际化：内置完善的国际化方案
• Mock 数据 内置 Mock 数据方案,已使用 apifox 进行替代
• 权限 内置完善的动态路由权限生成方案
• 组件 二次封装了多个常用的组件

Document

准备

• node 和 git -项目开发环境
• Vite - 熟悉 vite 特性
• Vue3 - 熟悉 Vue 基础语法
• TypeScript - 熟悉TypeScript基本语法
• Es6+ - 熟悉 es6 基本语法
• Vue-Router-Next - 熟悉 vue-router 基本使用
• Ant-Design-Vue - ui 基本使用
• Mock.js - mockjs 基本语法

安装使用

• 获取项目代码

  git clone http://192.168.100.32:3000/fanfan/xt-front.git
  

• 安装依赖

  cd xt-front
  
  pnpm install
  
  

• 运行

  pnpm run serve
  

• 打包

  pnpm build
  

npm script

"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"
},

目录说明

.
├── 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 规范 (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 - Used for local and development environment data mock
• vite-plugin-html - Used for html template conversion and compression
• vite-plugin-style-import - Used for component library style introduction on demand
• vite-plugin-theme - Used for online switching of theme colors and other color-related configurations
• vite-plugin-imagemin - Used to pack compressed image resources
• vite-plugin-compression - Used to pack input .gz|.brotil files
• vite-plugin-svg-icons - Used to quickly generate svg sprite

浏览器支持

##测试Git

本地开发推荐使用Chrome 80+ 浏览器

支持现代浏览器, 不支持 IE

|

IE |
Edge |
Firefox |
Chrome |
Safari | | not support | last 2 versions | last 2 versions | last 2 versions | last 2 versions |