有来团队后台项目-解析10

axios

安装

pnpm i axios

创建文件

src 目录下创建 utils 文件夹，utils 文件夹下创建request.ts

src 目录下创建store 文件夹，文件夹下创建index.ts ，创建modules 文件夹

编写request.ts

// 引入axios，引入请求拦截器类型约束，响应拦截器类型约束
import axios, { InternalAxiosRequestConfig, AxiosResponse } from "axios";// 创建axios  实例const service = axios.create({baseURL: "http://localhost:3000",timeout: 5000,
});
// 请求拦截器
service.interceptors.request.use((config: InternalAxiosRequestConfig) => {// 在发送请求之前做些什么return config;},(error: any) => {// 对请求错误做些什么return Promise.reject(error);}
);
// 响应拦截器
service.interceptors.response.use((response: AxiosResponse) => {// 对响应数据做点什么return response;},(error: any) => {// 对响应错误做点什么return Promise.reject(error);}
);
// 导出axios 实例
export default service;

配置环境变量

新建目录

src/.env.development 开发环境
src/.env.production 生产环境

配置环境

// .env.development
## 开发环境
NODE_ENV='development'
# 应用端口
VITE_APP_PORT = 3009# 代理前缀
VITE_APP_BASE_API = '/dev-api'# 线上接口地址
VITE_APP_API_URL = http://vapi.youlai.tech

//.env.production
## 生产环境
NODE_ENV='production'# 代理前缀
VITE_APP_BASE_API = '/prod-api'

配置环境变量只能提示

新建文件src/typings/env.d.ts
// 环境变量的类型约束

/// <reference types="vite/client" />declare module "*.vue" {import { DefineComponent } from "vue";// eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-typesconst component: DefineComponent<{}, {}, any>;export default component;
}interface ImportMetaEnv {/** 应用端口 */VITE_APP_PORT: string;/** API 基础路径 */VITE_APP_BASE_API: string;VITE_APP_API_URL: string;
}interface ImportMeta {readonly env: ImportMetaEnv;
}/*** 平台的名称、版本、运行所需的`node`版本、依赖、构建时间的类型提示*/
declare const __APP_INFO__: {pkg: {name: string;version: string;engines: {node: string;};dependencies: Record<string, string>;devDependencies: Record<string, string>;};buildTimestamp: number;
};

配置package.json

 "preinstall": "npx only-allow pnpm",// 只能使用pnpm
"build": "vite build --mode production",
"dev": "vite serve --mode development",
"build:prod": "vite build --mode production && vue-tsc --noEmit",
"engines": {"node": ">=18.0.0"},

vue-tsc：Vue 官方提供的命令，用于执行 TS 的类型检查。它在执行时会根据项目中的 tsconfig.json 文件配置进行类型检查
–noEmit：TS 编译器的选项，使用 --noEmit 选项后，编译器仅执行类型检查，而不会生成任何实际的编译输出
engines: node 的版本要大于18.0.0

配置vite.config.ts

 // 获取环境const env = loadEnv(mode, process.cwd());// 配置代理server: {// 允许IP 访问host: "0.0.0.0",port: Number(env.VITE_APP_PORT),open: true,proxy: {// 配置代理[env.VITE_APP_BASE_API]: {changeOrigin: true,// 接口地址target: env.VITE_APP_BASE_API,rewrite: (path) =>path.replace(new RegExp("^" + env.VITE_APP_BASE_API), ""),},},},

安装遗漏的icon 插件

pnpm i unplugin-icons

配置lint-staged文件

pnpm i lint-staged S

配置husky文件

在.husky 文件夹下的pre-commit文件中配置

npm run lint:lint-staged

配置package.json

// 在代码提交之前，进行代码规则检查能够确保进入git库的代码都是符合代码规则的

    "lint:lint-staged": "lint-staged",

执行配置命令

pnpm run dev
pnpm run build:prod

查看是否会报错

补充安装git 提交规范

安装

npm i -D cz-git czg

配置

package.json 中

// package.json 添加 config 字段，指定使用的 commitizen 适配器，然后在 script 中添加一个脚本命令
"scripts": {"commit": "git-cz"}"config": {"commitizen": {"path": "node_modules/cz-git"}},

以后把 git commit 替换成 npm run cz

pinia

安装

pnpm i pinia

@vueuse/core

一些封装好的工具方法

pnpm i @vueuse/core

查看源码

https://github.com/1094549944/youlahoutaijiexi/tree/jiexi10