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