3.5 KiB
项目初始模板
这是 web 端项目初始模板。
模板搭建思路
整体来说，模板是基于 Vite 脚手架生成的，在此基础上做少量改动，以及加入自定义的基建。
技术栈
类型系统
中大型项目如果缺少类型系统，则难以维护。TypeScript 作为 JavaScript 的超集，很好的弥补了类型系统的缺失。它是现代前端项目的标配之一。
UI library
现代前端业界 UI 库有不少，耳熟能详的有 Angular、React、Vue、Sevlte、Solid。我们是使用 Vue，版本 3.0 以上，理由如下：
- UI 库最好是采用主流方案，而 React 与 Vue 是国内最普及的方案
- 公司项目大多都使用 Vue，继续使用 Vue 不会产生额外学习成本
- 相比 React，Vue 更简单容易上手
- 目前 Vue 的最新版本是 3.3，比起 Vue2 有了许多改进优化的地方
router
前端应用一般都需要路由，而 vue-router 是 Vue 的官方路由库，所以它成为项目模板的路由方案。
store
前端应用大多都需要 store 共享状态。Vue2 的 store 方案是 Vuex，而 Vue3 的官方推荐是使用 pinia。所以 pinia 成为项目模板中的 store 方案。
http 请求库
前端应用基本都需要通过 http 请求与服务端通信，axios 是使用率最高的请求库，所以它成为项目模板的网络请求库。
基建
项目除了包含业务功能外，我们还需要一些手段来保证项目的可维护性、可靠性、效率，这些手段可被笼统地成为基建。本项目模板的基建遵循前端开发文档的要求。
代码提交规范
代码提交须遵循前端开发文档要求的 Angular 提交规范，相应的约束工具则是 commitlint。
编码规范
编码规范是根据项目技术栈具体而定。对于 Vue3 web 端项目，一般遵循 eslint:recommended、plugin:vue/vue3-essential、@vue/typescript/recommended。相应的校验工具则是 eslint。
代码格式化
代码格式须遵循前端开发文档的格式规范，相应的约束工具是 prettier，而配置文件是作为 npm 包，发布至内网仓库中，以供复用：@gci/prettier-config。
包管理器
根据前端开发文档，包管理器统一使用 pnpm。同时，为了强制使用 pnpm，在 package.json script 中增加 preinstall 钩子，校验包管理器。
代码提交门禁
为保证代码的提交质量，在提交前须进行一些校验活动：提交规范、编码规范校验、代码格式化，如果校验失败，则不允许提交。使用了 husky 及 lint-staged 完成这部分的工作。
打包工具
Vite 是近年来新出的打包工具，也是开发 Vue 项目的最佳搭配之一。
CI/CD
TODO 待补充。
异常性能监控
TODO 待补充。