使用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", // 是否使用尾逗号,有三个可选值"<none|es5|all>"
"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-commitnpm test
改成npm run lint
npm install husky -D
npx husky install
package.json中添加命令"prepare": "husky install"
修改.husky文件夹下面的pre-commitnpm test
改成npm run lint
规范提交信息(使用这个依赖可以生成更好的提交信息)
npm install commitizen -D
npx commitizen init cz-conventional-changelog --save-dev --save-exact
提交时敲命令
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 "
下载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
文件结构
- 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<T>(config: myAxiosRequestConfig<T>): Promise<T> {
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<any, T>(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<T = AxiosResponse> {
requestInterceptors?: (config: AxiosRequestConfig) => AxiosRequestConfig;
requestErrorInterceptors?: (error: any) => any;
responseInterceptors?: (response: T) => T;
responseErrorInterceptors?: (error: any) => any;
}
export interface myAxiosRequestConfig<T = AxiosResponse>
extends AxiosRequestConfig {
interceptors?: myRequestInterceptors<T>;
isShowLoading?: boolean;
}