Vue3+Pinia+Vite+TS 还原高性能外卖APP项目 3️⃣项目搭建及前期准备

一、使用create-vue创建 vue3项目(项目中使用的是这个)

npm init vue

Project name: ele-h5
Add TypeScript? Yes
Add JSX Support? Yes
Add Vue Router for Single Page Application development? Yes
Add Pinia for state management? Yes
Add Vitest for nit Testing? No
Add Cypress for both Unit and End-to-End testing? No
Add ESLint for code quality? Yes
Add Prettier for code formatting? Yes

// 成功后按照提示 初始化并 启动项目
cd ele-h5
npm install
npm run lint
npm run dev

二、使用vite创建 vue3项目

Vite 是一种新型前端构建工具，能够显著提升前端开发体验
主要由两部分组成：
1.一个开发服务器：它基于原生 ES 模块，提供了富的内建功能，比如速度快到惊人的模块热更新(HMR)
2.一套构建指令：它使用 Rollup 打包你的代码，并且它是预配置的，可输出用于生产环境的高度优化过的静态资源
从两个方面优化：
1.开发服务器启动
2.热更新

// 使用 Vite 创建 Vue3 项目 使用npm
// npm 6.x
$ npm init vite@latest <project-name> --template vue
// #npm 7+，需要加上额外的双短横线
$ npm init vite@latest <project-name> -- --template vue

$ cd <project-name>
$ npm install
$ npm run dev

三、使用husky 管理Git Hooks

什么是 Git Hooks?
hooks：一些时机的回调
Git hooks：Git 流程中时机的回调（局限性：要自己写脚本，要对Git有一定的了解）

---

使用 husky
校验 commit 信息、运行测试代码、校验代码格式……
安装：npx husky-init && npm install

四、使用commitlint 规范commit 信息

为什么需要 commitlint？
项目中产生大量的 commit 版本，这些 commit 记录了整个项目的开发进程
通过 commit 来：回顾项目开发进展；回退版本

---

规范要求我们按以下规定来填写commit 信息：
type(scope?): subject
type 表示 commit 的类型
scope 是可选的，表示当前 commit 修改的模块范围
subject 就是描述 commit 的详细说明
根据规范，type 可以为以下这些值(搜commitlint-config-conventional)：
build、chore、ci、docs、feat(新功能)、fix(修复)、perf(性能)、refactor(重构)、revert、style、test

---

如何使用 github.com/conventional-changelog/commitlint
1.np