（一）项目创建
# npm 6.x
npm init vite@latest my-vue-app --template vue-ts
# npm 7+, 需要额外的双横线：
npm init vite@latest my-vue-app -- --template vue-ts
注：不使用ts模板则去掉后面的 -ts
（二）设置项目别名
vite.config.ts文件中（提示path不存在，安装@types/node）
import vue from '@vitejs/plugin-vue'
import path from 'path'
// https://vitejs.dev/config/
export default defineConfig({
resolve: {
alias: {
'@': path.resolve(__dirname, './src')
}
},
plugins: [vue()]
})
tsconfig.ts文件中添加 paths
"compilerOptions": {
"paths": {
"@/*": ["./src/*"]
}
}
}
(三）Axios封装使用
axios/index.ts
import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios'
import { ElMessage } from 'element-plus'
import { getToken } from "@/utils/cookies";
import configInfo from "@/config";
import router from "@/router";
class JGRequest {
service: AxiosInstance
constructor() {
this.service = axios.create({
baseURL: configInfo.base.ip + configInfo.base.backend_port,
timeout: 12000
})
this.service.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8;'
this.service.interceptors.request.use((config: AxiosRequestConfig) => {
if(!getToken()){
// if (config.headers) {
config.headers = {...config.headers}
config.headers.Authorization = 'Bear' + getToken()
console.log('没有token')
// }
}else {
router.replace({
path: '/Login',
});
console.log(12323)
}
return config
}, err => {
console.log(err)
return Promise.reject(err)
})
this.service.interceptors.response.use((response: AxiosResponse) => {
return Promise.resolve(response);
},error => {
errorInfoShow(error)
})
}
posts(url: string, params?: any) {
return new Promise((resolve, reject) => {
this.service.post(url, params).then(response => {
resolve(response)
}, err => {
ElMessage.error('请求失败');
reject(err)
}).catch((error) => {
reject(error)
})
})
}
gets(url: string, params?: any) {
return new Promise((resolve, reject) => {
this.service.get(url, { 'params': params }).then(response => {
resolve(response)
}, err => {
ElMessage.error('请求失败');
reject(err)
}).catch((error) => {
reject(error)
})
})
}
puts(url: string, params?: any) {
return new Promise((resolve, reject) => {
this.service.put(url, params).then(response => {
resolve(response)
}, err => {
ElMessage.error('请求失败');
reject(err)
}).catch((error) => {
reject(error)
})
})
}
deletes(url: string, params?: any) {
return new Promise((resolve, reject) => {
this.service.delete(url, { 'params': params }).then(response => {
resolve(response)
}, err => {
ElMessage.error('请求失败');
reject(err)
}).catch((error) => {
reject(error)
})
})
}
}
export function errorInfoShow(err: any) {
if (err && err.response) {
switch (err.response.status) { // 判断后台返回的token值是否失效
case 401:
ElMessage.error('登录过期，请重新登录');
router.replace({
path: '/Login',
});
break
case 400:
ElMessage.error('请求错误');
break
case 403:
ElMessage.error('访问错误');
break
case 404:
ElMessage.error('未找到服务');
break
case 408:
ElMessage.error('请求超时');
break
case 500:
ElMessage.error('服务器内部错误');
break
case 501:
ElMessage.error('服务未实现');
break
case 502:
ElMessage.error('网关错误');
break
case 503:
ElMessage.error('服务不可用');
break
case 504:
ElMessage.error('网关超时');
break
case 505:
ElMessage.error('HTTP版本不受支持');
break
default:
break
}
return Promise.reject(err)
} else if (err & err.request) {
return Promise.reject(err.request)
} else {
// Something happened in setting up the request that triggered an Error
return Promise.reject(err)
}
}
const jgRequest = new JGRequest()
export default jgRequest
api/index.ts
import axios from "@/axios";
export function tableList() {
return axios.gets('/api/category')
}
文件中使用
import { tableList } from '@/api/api'
tableList().then((res: any) => {
console.log(res)
}).catch((err: any) => {
ElMessage.error('请求失败')
})
（四）store使用 Vue3 store推荐使用pinia 简单方便
安装pinia
npm install pinia@next
main.ts
import { createPinia } from 'pinia'
const app = createApp(App)
app.use(createPinia())
store/user.ts
import { defineStore } from "pinia";
import { getToken, setToken } from "@/utils/cookies";
import { addCourse } from "@/api/api";
export const useUserStore = defineStore({
id: 'user',
state: () => ({
token: getToken(),
name: '',
roles: []
}),
actions: {
login(userInfo: { username: string, password: string; }) {
const { username, password } = userInfo
return new Promise((resolve, reject) => {
addCourse({ username: username.trim(), password: password }).then((response: any) => {
const { data } = response
this.$patch({
token: data.token
})
setToken(data.token)
resolve(data)
}).catch(error => {
reject(error)
})
})
},
}
})
vue使用方法
import { useUserStore } from '@/store/user'
setup() {
const userStore = useUserStore()
const data = reactive({
form: {
username: 'admin',
password: '1q2w3E*'
}
})
const methods = reactive({
login() {
userStore.login(data.form).then(res=> {
}).catch(()=> {
})
}
})
