71 lines
3.5 KiB
Markdown
71 lines
3.5 KiB
Markdown
# 项目初始模板
|
||
|
||
这是 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 待补充。
|