基于Vue3+TS+VITE搭建好用的UNI-APP项目基础模板

插件市场地址：Vue3-Uni-TS-Template基础模板

背景

uni-app在App/H5/小程序全平台支持Vue 3.0开发，且全平台支持Vite编译器，使用vue3+Vite可以让我们的uni-app项目获得了多快好省四大收益：

• 更多的语法支持，支持组合式API，业务聚焦，开发效率更高；
• 更快的编译速度，H5平台十倍加速，小程序、App加速30%以上；
• 更好的运行性能，用户端响应更快，体验更好；
• 更小的代码体积，瘦身30%以上，更省体积、更省流量

而使用TypeScript则可以为我们带来：

• 更好的类型检查：TypeScript可以在编译时检查类型错误，避免在运行时出现错误。

• 更好的代码提示：TypeScript可以根据类型信息提供更好的代码提示，提高开发效率。

• 更好的可维护性：TypeScript可以使代码更加清晰易懂，减少出错的可能性，提高代码的可维护性。

• 更好的扩展性：TypeScript可以使用ES6和ES7的新特性，使代码更加现代化，同时也可以使用第三方库和框架。

• 更好的团队协作：TypeScript可以使团队成员之间的代码更加一致，减少出错的可能性，提高团队协作效率

介绍

本插件是一个基于uni-app和fant-mini-plus的vue3项目基础模板，使用vue3、vite4、fant-mini-plus、pinia、uni-mini-router、axios、fant-axios-adapter开发，基于koa实现mock功能

特性

• 使用vue3/vite4/pinia/axios等主流框架开发
• 引入fant-mini-plus组件库，开箱即用
• 引入Eslint/Prettier，统一前端代码风格
• 引入lint-staged/husky/commitlint/commitizen/standard-version，统一代码提交规范，自动生成版本发布日志
• 使用pinia，并支持持久化存储
• 提供koa-mock本地mock服务
• 支持axios取消请求（基于requestTask.abort()实现）

  注意！！！

  插件市场会将类似.eslintrc.js这种以.开头的文件忽略掉，故我将.改成了_上传。如果直接在插件市场下载，需要手动将_改为.，涉及文件及目录包含_husky、_vscode、_env.development、_env.production、_eslintignore、_eslintrc.js、_git-cz.json、_gitignore、_prettierrc等文件。也可以到giteeclone或fork。

项目依赖

项目结构

uniapp-vue3-fant-ts  
├─ .env.development----------------------------------环境变量文件dev时生效，VITE_BASEURL为接口地址  
├─ .env.production-----------------------------------环境变量文件build时生效，VITE_BASEURL为接口地址  
├─ .eslintignore-------------------------------------eslint豁免校验的配置，配置的文件免于eslint校验  
├─ .eslintrc.js--------------------------------------eslint配置，指定eslint校验规则  
├─ .gitignore  
├─ .husky--------------------------------------------git hooks，此处配置了pre-commit和commit-msg两个  
├─ .prettierrc---------------------------------------prettier配置，指定prettier校验规则  
├─ .vscode-------------------------------------------vscode配置，实现保存的时候格式化  
├─ CHANGELOG.md--------------------------------------版本发布日志  
├─ README.md  
├─ commitlint.config.js------------------------------commitlint配置文件  
├─ index.html  
├─ koa-mock------------------------------------------基于koa实现的本地mock项目  
│    ├─ api------------------------------------------将接口返回的json放在此目录，接口即为api/文件名  
├─ package.json  
├─ src-----------------------------------------------项目资源目录  
│    ├─ App.vue--------------------------------------uni的主组件，所有页面都是在App.vue下进行切换的，是页面入口文件  
│    ├─ api------------------------------------------API文件，用于集中管理接口  
│    ├─ http-----------------------------------------axios拦截器，用于自定义请求和响应拦截  
│    ├─ main.ts--------------------------------------入口文件，主要作用是初始化vue实例、定义全局组件  
│    ├─ manifest.json--------------------------------应用的配置文件，用于指定应用的名称、图标、权限等  
│    ├─ model----------------------------------------API接口用到的typescript模型，集中管理  
│    ├─ pages----------------------------------------业务页面  
│    ├─ pages.json-----------------------------------页面全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等  
│    ├─ router---------------------------------------路由配置，导航守卫  
│    ├─ static---------------------------------------资源文件，图片等  
│    ├─ store----------------------------------------pinia配置，持久化存储  
│    │    ├─ index.ts  
│    │    └─ persist.ts------------------------------持久化插件  
│    ├─ types.d.ts-----------------------------------typescript的声明文件  
│    ├─ uni.scss-------------------------------------全局scss变量，无需引入可以直接使用  
│    └─ uni_modules----------------------------------uni-app插件  
│           ├─ fant-mini-plus------------------------一款vue3组件库  
│           └─ mp-html-------------------------------富文本插件  
├─ tsconfig.json-------------------------------------TypeScript 编译器的配置文件  
├─ versionrc.js--------------------------------------standard-version的配置文件  
├─ vite.config.ts------------------------------------用于配置 vite 的编译选项  
└─ yarn.lock-----------------------------------------Yarn生成的锁文件，它用于记录在使用Yarn安装包时确切的依赖关系和版本号

开发步骤

• 安装依赖
  • 安装前端项目依赖：yarn
  • 安装mock项目依赖：yarn mock:install
• 运行
  • 运行前端项目：yarn dev:h5 （其他平台命令在uni-app官网或者package.json中查看）
  • 运行mock项目：yarn mock:dev
• 提交代码
  • 暂存准备提交的代码（举例添加当前目录下的所有文件到暂存区）：git add .
  • 提交：yarn commit，输入之后回车，我们可以选择提交类型。
• 发布版本（此处操作会使package.json中的version变更，可以此为版本号对显示）
  • 大版本升级1.0.0->2.0.0：yarn release-major
  • 中版本升级1.0.0->1.1.0：yarn release-minor
  • 小版本升级（一般是补丁）1.0.0->1.0.1：yarn release-patch
  • 注意：执行完发布版本的命令之后需要将执行终端中打印的命令将生成的tag推送到git。此操作完成之后会自动生成版本发布日志，可以用于对外发布

开发提示

• 使用typescript开发可以提高前后端交互的效率，提升前端项目的健壮性。在开发过程中需要做到尽量减少使用any。
  小程序样式变量统一定义在uni.scss中，作为规范，若设计稿上使用的颜色存在于uni.scss中，则使用uni.scss中的变量，如不存在则需要沟通是否新增变量。

• 提交代码时，feat和fix类型的提交尽量将任务单号作为前缀方便追踪改动关联的需求，如：feat: TASK-1000 新增某个功能。

• css原子化，如果有需要可以自行引入UnoCSS，本项目暂时不会使用。