vue3构建项目流程总结

1.vite

npm init vite@latest 项目名称 -- --template vue-ts

2.package.json
“dependencies”: {
“@element-plus/icons-vue”: “^2.0.6”,
“axios”: “^0.27.2”,
“dayjs”: “^1.11.3”,
“element-plus”: “^2.2.6”,
“jwt-decode”: “^3.1.2”,
“pinia”: “^2.0.14”,
“pinia-plugin-persist”: “^1.0.0”,
“ts-md5”: “^1.2.11”,
“vue”: “^3.2.25”,
“vue-router”: “^4.0.16”,
“wangeditor”: “^4.7.15”
}

3.main.ts

import {
    createApp } from 'vue'
import App from './App.vue'
//导入我们的路由文件
import Router from  './router/index'
//导入store
import store from './store/index'
//导入饿了么UI组件
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
   
  app.component(key, component)
}
//实用路由
app.use(Router)
//使用store
app.use(store);
//使用饿了么UI组件
app.use(ElementPlus)
app.mount('#app')

4.http
index.ts

import axios, {
   
  AxiosRequestConfig,
  AxiosRequestHeaders,
  AxiosResponse,
} from "axios";
import {
    ElMessage, ElLoading } from "element-plus";
import {
    storeToRefs } from "pinia";
import appStore from "@/store/appStore";
let {
     token } = storeToRefs(appStore());

const state = {
   
  ok: 0,//请求成功状态码
  401:"ERR_BAD_REQUEST"
};

//返回数据规则
interface IResponseData<T> {
   
  status: number;
  message?: string;
  data: T;
  code: string;
}

//请求默认配置规则
type TOption = {
   
  baseURL: string;
  timeout: number;
};

//默认配置
const config = {
   
  baseURL: "",
  timeout: 30 * 1000,
  withCredentials: true,
};


let loading:any = null;

class Http {
   
  service: any;
  constructor(config: TOption) {
   
    //实例化请求配置
    this.service = axios.create(config);

    //请求拦截
    this.service.interceptors.request.use(
      (config: AxiosRequestConfig