有来团队后台项目-解析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-types
  const 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