网站建设缺陷,无代码建站,广州市公司网站建设价格,政务门户网站建设axios
安装
pnpm i axios创建文件
src 目录下创建 utils 文件夹#xff0c;utils 文件夹下创建request.ts
src 目录下创建store 文件夹#xff0c;文件夹下创建index.ts #xff0c;创建modules 文件夹
编写request.ts
// 引入axios#xff0c;引入请求拦截器类型约束…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_ENVdevelopment
# 应用端口
VITE_APP_PORT 3009# 代理前缀
VITE_APP_BASE_API /dev-api# 线上接口地址
VITE_APP_API_URL http://vapi.youlai.tech
//.env.production
## 生产环境
NODE_ENVproduction# 代理前缀
VITE_APP_BASE_API /prod-api配置环境变量只能提示
新建文件src/typings/env.d.ts // 环境变量的类型约束
/// reference typesvite/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: Recordstring, string;devDependencies: Recordstring, 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-tscVue 官方提供的命令用于执行 TS 的类型检查。它在执行时会根据项目中的 tsconfig.json 文件配置进行类型检查 –noEmitTS 编译器的选项使用 --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 piniavueuse/core
一些封装好的工具方法
pnpm i vueuse/core查看源码
https://github.com/1094549944/youlahoutaijiexi/tree/jiexi10
