vue3项目搭建

使用vue-cli快速搭建项目

winpty vue.cmd create hello-world

选择

vue3
typescript
babel
CSS Pre-processors (sass)
router
vuex
linter (eslint+prettier)

创建.prettierrc文件

{
  "useTabs": false, // 使用tab
  "tabWidth": 2, // 缩进大小
  "printWidth": 80, // 一行的字符数，如果超过会进行换行，默认为80
  "singleQuote": false, // 使用单引号
  "trailingComma": "es5", // 是否使用尾逗号，有三个可选值""
  "semi": true  // 行位是否使用分号，默认为true
}

创建.prettierignore文件

/dist/*
.local
.output.js
/node_modules/**

**/*.svg
**/*.sh

/public/*

安装依赖

npm install prettier -D

package.json 增加命令 进行统一格式化

"prettier": "prettier --write ."

vscode 保存时自动fix（设置setting.json）

ctrl+shift+p ==> setting.json

{
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.run": "onSave",
  "files.autoSaveDelay": 3000,
}

提交代码前对代码进行eslint检测并且修复

执行 npx husky-init
修改.husky文件夹下面的pre-commit npm test改成npm run lint

npm install husky -D
npx husky install
package.json中添加命令 "prepare": "husky install"
修改.husky文件夹下面的pre-commit npm test改成npm run lint

规范提交信息（使用这个依赖可以生成更好的提交信息）

npm install commitizen -D
npx commitizen init cz-conventional-changelog --save-dev --save-exact

微信图片_20220526165653.png

提交时敲命令 npx cz 然后根据提示走完commit流程

强制要求 规范提交

npm i @commitlint/config-conventional @commitlint/cli -D

• 配置commitlint.config.js

module.exports = {
  extends: ["@commitlint/config-conventional"],
};

• 使用husky生成commit-msg文件， 验证提交信息

npx husky add .husky/commit-msg "npx --no-install commitlint --edit $1"

下载element-plus

npm install element-plus --save

• 设置自动导入

npm install -D unplugin-vue-components unplugin-auto-import

• 修改 vue.config.js

const { defineConfig } = require("@vue/cli-service");

const AutoImport = require("unplugin-auto-import/webpack");
const Components = require("unplugin-vue-components/webpack");
const { ElementPlusResolver } = require("unplugin-vue-components/resolvers");

module.exports = defineConfig({
  transpileDependencies: true,
  configureWebpack: {
    plugins: [
      AutoImport({
        resolvers: [ElementPlusResolver()],
      }),
      Components({
        resolvers: [ElementPlusResolver()],
      }),
    ],
  },
});

封装axios

文件结构

微信图片_20220529144727.png

• service/index.ts

import myRequest from "./request";

export const myHttp = new myRequest({
  baseURL: process.env.VUE_APP_BASE_URL,
  timeout: 1000,
  // interceptors: {
  //   requestInterceptors(config) {
  //     console.log("拦截成功回调", config);
  //     return config;
  //   },
  //   responseInterceptors(res) {
  //     return res.data;
  //   },
  // },
});

• service/request/index.ts

import axios from "axios";
import type { AxiosInstance } from "axios";
import type { myRequestInterceptors, myAxiosRequestConfig } from "./type";

import { ElLoading } from "element-plus";
import "element-plus/theme-chalk/el-loading.css";

const DEFAULE_LOADING = false; // 默认不展示全局loading

class myRequest {
  instance: AxiosInstance;
  interceptors?: myRequestInterceptors;
  myLoading?: { close: () => void };
  isShowLoading: boolean;
  constructor(config: myAxiosRequestConfig) {
    this.instance = axios.create(config);
    // 创建实例时传入
    this.interceptors = config.interceptors;

    this.isShowLoading = config.isShowLoading ?? DEFAULE_LOADING;
    // 单个实例拦截
    // this.instance.interceptors.request.use(
    //   this.interceptors?.requestInterceptors,
    //   this.interceptors?.requestErrorInterceptors
    // );
    // this.instance.interceptors.response.use(
    //   this.interceptors?.responseInterceptors,
    //   this.interceptors?.responseErrorInterceptors
    // );

    // 全部实例拦截
    this.instance.interceptors.request.use((config) => {
      if (this.isShowLoading) {
        this.myLoading = ElLoading.service({
          lock: true,
          text: "Loading",
          background: "rgba(0, 0, 0, 0.5)",
        });
      }
      return config;
    });

    this.instance.interceptors.response.use((res) => {
      this.myLoading?.close();
      return res.data;
    });
  }

  request(config: myAxiosRequestConfig): Promise {
    return new Promise((resolve, reject) => {
      // 获取传入的loading
      if (config.isShowLoading) {
        this.isShowLoading = config.isShowLoading;
      }
      // 在这里可以做 单个请求的拦截 判断是否有interceptors
      // if (config.interceptors?.requestInterceptors) {
      //   config = config.interceptors.requestInterceptors(config);
      // }
      this.instance
        .request(config)
        .then((res) => {
          // 这里可以做单个请求的 响应拦截
          // if (config.interceptors?.responseInterceptors) {
          //   res = config.interceptors.responseInterceptors(res);
          // }
          this.isShowLoading = DEFAULE_LOADING;

          resolve(res);
        })
        .catch((err) => {
          this.isShowLoading = DEFAULE_LOADING;
          reject(err);
          return err;
        });
    });
  }
}

export default myRequest;

• service/request/type.ts

import type { AxiosRequestConfig, AxiosResponse } from "axios";

export interface myRequestInterceptors {
  requestInterceptors?: (config: AxiosRequestConfig) => AxiosRequestConfig;
  requestErrorInterceptors?: (error: any) => any;
  responseInterceptors?: (response: T) => T;
  responseErrorInterceptors?: (error: any) => any;
}

export interface myAxiosRequestConfig
  extends AxiosRequestConfig {
  interceptors?: myRequestInterceptors;
  isShowLoading?: boolean;
}