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.npm install --save-dev @commitlint/{config-conventional,cli} 安装配合文件
2.echo “module.exports = {extends: [‘@commitlint/config-conventional’]}” > commitlint.config.js 将commitlint配置为使用常规配置

---

具体配置可以参考 CodeLint规范（一）之CommitLint配置

五、配置 eslint、prettier 规范项目

• esLint/prettier 在初始化项目的时候已经配置完成
• 项目中有.eslintrc.cjs文件，package.json中也有显示

六、配置 .editorconfig、使用 lint-staged 配置 pre-commit

七、安装 vant-ui 和使用 Vite 按需加载组件

国内vant官网地址1：https://vant-contrib.gitee.io/vant/#/zh-CN/
国内vant官网地址2：https://vant-contrib.gitee.io/vant/#/zh-CN/home
vant【w3cschool中文教程】地址：https://www.w3cschool.cn/vantlesson/

• 安装vantui：npm i vant 后面常规引用按照官网教程即可
• 安装过程中出现下面这种报错，需要进行node版本升级

//  解决: 将node版本升级为16以上就可以 运行了
node:1108) UnhandledPromiseRejectionWarning: SyntaxError: Unexpected token '??='
at Loader.moduleStrategy (internal/modules/esm/translators.js:141:18)
(Use `node --trace-warnings ...` to show where the warning was created)
(node:1108) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
(node:1108) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

八、vue-router 实现页面路由

vue 的官方路由
1、 嵌套路由映射
2、 动态路由选择
3、 模块化、基于组件的路由配置
4、 路由参数、查询、通配符
5、 HTML 5 history 模式或 hash 模式等
如何配置路由
内容组件渲染的地方 <router-view>
路由与组件的对应关系 router 实例 config
触发路由跳转的地方(如果需要的话) <router-link> 和 代码动态设置

九、使用 json-server 搭建 Mock Server

需要使用 mock 数据来模拟后端提供接口数据
使用 json-server 方式
1.通过 json-server 命令启动一个服务
2.通过 module 将 json-server 引入到自己的 node 服务
middleware：中间件，用来处理所有请求，比如鉴权、静态资源等功能
json-server 提供的中间件：静态资源、请求体解析
自定义中间件：鉴权
service
router：带路由 url 的中间件，处理特定路由 url 的请求
json-server 的路由：一些直接使用 json 数据的 api
自定义路由：有自定义逻辑的 api
controller

ele-h5-server 文件结构
◆ data：存放所有数据 json 文件
◆ public：存放静态资源，比如图片
◆ src：项目的处理逻辑
– src下 app.js：项目入口文件，包括应用创建、中间件使用
– src下 router.js：处理自定义路由
– src下 db.js：处理 json-server 的路由
– src下 controller：存放 controller
– src下 service：存放service
json-server的使用
https://github.com/typicode/json-server
使用 Nodemon 不用频繁重启服务
https://blog.csdn.net/m0_72410588/article/details/131911655)

十、使用 Vite 配置请求代理

• 什么是跨域？
  1.同源：协议 protocol、 端口 port、 域名 host 都相等
  2.常用的跨域方案：
  ① jsonp：script 不受同源策略限制
  ② 跨源域资源共享 CORS：允许 Web 应用服务器进行跨源访问控制
  ③ 使不同的源变成同源 (如 反向代理)
• vite的组成
  1.开发服务器：基于 ES 模块提供丰富的内建功能
  2.构建指令：使用 Rollup 打包代码，提供预设配置
• 为什么用vite
  当我们的应用越来越大型的时候，就会开始出现一些性能问题：
  1.启动本地开发服务器的时间会很久（vite优化 开发服务器启动）
  2.热更新也会很慢（vite优化 热更新）
  
• vite优化
  1.开发服务器启动 方面，vite 从依赖打包和源码打包这两个方面提升性能
  依赖：使用 esbuild 进行依赖预打包，esbuild 使用 Go 编写，会比javascript-based 的打包工具快 10-100 倍
  源码：使用浏览器原生 es module 提供源码，让浏览器接管打包工具的部分工作
  2.热更新 方面，vite 在文件热更新上做了优化:
  使用 ESM 不需要重新编译：一些打包工具的开发服务器在文件更改时，需要重新构建整个项目，来获取新的模块依赖关系
  使用浏览器缓存加速：Vite 利用 HTTP 头来加速整个页面的重新加载

十一、使用 axios 请求库，设置请求拦截

Axios API地址 https://axios-http.com/zh/docs/instance

基于 Promise 网络请求库
// 同构：同一套代码可以运行在浏览器和 node.js中
// 在服务端中，使用原生 node.js 的 http 模块
// 在客户端(浏览器)中，使用XMLHttpRequests
特性
// 支持 Promise API; 拦截请求和响应取消请求; 自动转换 JSON 数据

const axios =require('axios');
// 向给定ID的用户发起请求
axios.get('/user?ID-12345').then(function(response){
	console.log(response); // 处理成功情况
}).catch(function(error){
	console.log(error); // 处理错误情况
}).then(function(){
	// 总是会执行
});

状态码
信息响应(100-199)
成功响应(200-299)
重定向消息(300-399)
客户端错误响应(400-499)
服务端错误响应(500-599)

// 自定义 业务状态码
{
	'code":0,
	"msg":"请求成功",
	"data":{
		"name": "test",
		"desc":"我是自定义测试数据"
	}
}

十二、使用 post-css 实现移动端适配

常用适配方案
1.不同端使用不同代码，比如 PC端一套代码，移动端一套代码
2.不同端使用同一套代码，一般使用 CSS 样式来控制
3.移动端屏幕适配
①利用 rem 按根节点(body)的字体大小来缩放
②利用 vh/vw 按屏幕高度和宽度来缩放
css转换工具
1.autoprefixer：自动管理 CSS 属性的浏览器前缀
2.postcss-pxtorem：px转换为 rem
postcss官网 https://postcss.org/

const rootValue = 16
const rootWidth = 390
const deviceWidth = document.documentElement.clientWidth
document.documentElement.style.fontSize = (devicewidth * rootValue) / rootwidth + 'px'

十三、Tree Shaking移除无用的资源，包括 JS 代码、CSS 文件

按需引入组件样式 unplugin-vue-components
1.安装插件
2.在 vite.config.js 中配置插件
3.直接在模板使用 Vant 组件
4.引入函数组件的样式