参考vite官网:cn.vitejs.dev/guide/
1.初始化
升级最新版本：npm install vue@next创建名为'test'的项目：npm init vite-app test
2.下载依赖 运行
npm installnpm run dev
3.加入ip登录
4.依赖vue-router 参考博客:juejin.cn/post/700185…
npm install vue-router@4.0
创建src/router/index.ts文件，配置路由
import { createRouter, createWebHashHistory } from 'vue-router'export default createRouter({ // 指定路由模式 history: createWebHashHistory(), // 路由地址 routes: []})
5.添加依赖vuex 创建src/store/index.ts，配置vuex
import { createStore } from 'vuex'export default createStore({ state: { name: 'vueX' }})
6.添加依赖axios
// http/index.jsimport axios from 'axios'import { ElLoading, ElMessage} from 'element-plus';//创建axios的一个实例 var instance = axios.create({ baseURL: import.meta.env.VITE_APP_URL, //接口统一域名 timeout: 6000, //设置超时 headers: { 'Content-Type': 'application/json;charset=UTF-8;', }})let loading;//正在请求的数量let requestCount = 0//显示loadingconst showLoading = () => { if (requestCount === 0 && !loading) { loading = ElLoading.service({ text: "Loading ", background: 'rgba(0, 0, 0, 0.7)', spinner: 'el-icon-loading', }) } requestCount++;}//隐藏loadingconst hideLoading = () => { requestCount-- if (requestCount == 0) { loading.close() }}//请求拦截器 instance.interceptors.request.use((config) => { showLoading() // 每次发送请求之前判断是否存在token，如果存在，则统一在http请求的header都加上token，不用每次请求都手动添加了 const token = window.localStorage.getItem('token'); token && (config.headers.Authorization = token) //若请求方式为post，则将data参数转为JSON字符串 if (config.method === 'POST') { config.data = JSON.stringify(config.data); } return config; }, (error) => // 对请求错误做些什么 Promise.reject(error));//响应拦截器instance.interceptors.response.use((response) => { hideLoading() //响应成功 console.log('拦截器报错'); return response.data;}, (error) => { console.log(error) //响应错误 if(error.response&&error.response.status){ const status = error.response.status switch (status) { case 400: message = '请求错误'; break; case 401: message = '请求错误'; break; case 404: message = '请求地址出错'; break; case 408: message = '请求超时'; break; case 500: message = '服务器内部错误!'; break; case 501: message = '服务未实现!'; break; case 502: message = '网关错误!'; break; case 503: message = '服务不可用!'; break; case 504: message = '网关超时!'; break; case 505: message = 'HTTP版本不受支持'; break; default: message = '请求失败' } ElMessage.error(message); return Promise.reject(error); } return Promise.reject(error);});export default instance;————————————————版权声明：本文为CSDN博主「慌张°」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。原文链接：https://blog.csdn.net/weixin_44698285/article/details/116271180
import axios from 'axios';// 请求域名-本地请求// const http: string = 'http://192.168.1.128:8870';const http: string = '/api';// url处理const getUrl = (url: string) => { if (!url) { return ''; } return `${http}${url}`;};// post请求const Post = ({ url = '', data = {} }) => { let theUrl: string = getUrl(url); return axios.post(theUrl, data) .then((response) => { if (response) { return response; } else { return Promise.reject(); } })};// Get请求const Get = ({ url = '', data = {} }) => { let theUrl: string = getUrl(url); return axios.get(theUrl, { params: data }).then((response) => { if (response) { return response; } else { return Promise.reject(); } })}// export default {// Post// };export { Post, Get};
7.导入main.ts
import { createApp } from 'vue'import App from './App.vue'// 导入router和storeimport router from './router/index'import store from './store/index'const app = createApp(App)app.use(router)app.use(store)app.mount('#app')
8.vue-tsc 版本较低 可以用tsc 来替换
