Pada masa ini, terdapat banyak artikel mengenai penggunaan axios sebagai alat interaksi antara muka hadapan dan belakang dalam Vue pada blog tertentu di Internet. Oleh kerana projek itu perlu dibungkus dalam axios berdasarkan vite vue3.0 ts dari 0 hingga 1, hari ini saya akan membenarkan editor mengatur langkah pembungkusan khusus untuk axios untuk menyepadukan vite vue3.0 ts. Rakam langkah pengkapsulan anda sendiri, ikuti langkah saya dan mulakan. . . (Belajar perkongsian video: tutorial video vue)
Kandungan berikut adalah berdasarkan pengembangan selepas selesai video di bawah:
video projek pembelajaran rangka kerja Vite vue3 Volar Ts Element-plus 2021 yang terkini dan terbaik
1 Pasang axios
npm i axios
Salin selepas log masuk
Nota: di sini Arahan pemasangan adalah untuk memasang versi terkini axios secara lalai
2. Kod ralat permintaan pakej prompt error-code-type.ts
- Kodnya adalah seperti berikut ：
export const errorCodeType = function(code:string):string{
let errMessage:string = "未知错误"
switch (code) {
case 400:
errMessage = '错误的请求'
break
case 401:
errMessage = '未授权，请重新登录'
break
case 403:
errMessage = '拒绝访问'
break
case 404:
errMessage = '请求错误,未找到该资源'
break
case 405:
errMessage = '请求方法未允许'
break
case 408:
errMessage = '请求超时'
break
case 500:
errMessage = '服务器端出错'
break
case 501:
errMessage = '网络未实现'
break
case 502:
errMessage = '网络错误'
break
case 503:
errMessage = '服务不可用'
break
case 504:
errMessage = '网络超时'
break
case 505:
errMessage = 'http版本不支持该请求'
break
default:
errMessage = `其他连接错误 --${code}`
}
return errMessage
}Salin selepas log masuk
3. Encapsulate request.ts
Untuk elemen-plus yang digunakan di sini , anda boleh merujuk laman web rasminya untuk memasangnya Portal:
laman web rasmi elemen-plus
安装命令：
npm install element-plus --save
Salin selepas log masuk
- Kodnya adalah seperti berikut:
import axios from 'axios';
import { errorCodeType } from '@/script/utils/error-code-type';
import { ElMessage, ElLoading } from 'element-plus';
// 创建axios实例
const service = axios.create({
// 服务接口请求
baseURL: import.meta.env.VITE_APP_BASE_API,
// 超时设置
// timeout: 15000,
headers:{'Content-Type':'application/json;charset=utf-8'}
})
let loading:any;
//正在请求的数量
let requestCount:number = 0
//显示loading
const showLoading = () => {
if (requestCount === 0 && !loading) {
//加载中显示样式可以自行修改
loading = ElLoading.service({
text: "拼命加载中，请稍后...",
background: 'rgba(0, 0, 0, 0.7)',
spinner: 'el-icon-loading',
})
}
requestCount++;
}
//隐藏loading
const hideLoading = () => {
requestCount--
if (requestCount == 0) {
loading.close()
}
}
// 请求拦截
service.interceptors.request.use(config => {
showLoading()
// 是否需要设置 token放在请求头
// config.headers['Authorization'] = 'Bearer ' + getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
// get请求映射params参数
if (config.method === 'get' && config.params) {
let url = config.url + '?';
for (const propName of Object.keys(config.params)) {
const value = config.params[propName];
var part = encodeURIComponent(propName) + "=";
if (value !== null && typeof(value) !== "undefined") {
// 对象处理
if (typeof value === 'object') {
for (const key of Object.keys(value)) {
let params = propName + '[' + key + ']';
var subPart = encodeURIComponent(params) + "=";
url += subPart + encodeURIComponent(value[key]) + "&";
}
} else {
url += part + encodeURIComponent(value) + "&";
}
}
}
url = url.slice(0, -1);
config.params = {};
config.url = url;
}
return config
}, error => {
console.log(error)
Promise.reject(error)
})
// 响应拦截器
service.interceptors.response.use((res:any) => {
hideLoading()
// 未设置状态码则默认成功状态
const code = res.data['code'] || 200;
// 获取错误信息
const msg = errorCodeType(code) || res.data['msg'] || errorCodeType('default')
if(code === 200){
return Promise.resolve(res.data)
}else{
ElMessage.error(msg)
return Promise.reject(res.data)
}
},
error => {
console.log('err' + error)
hideLoading()
let { message } = error;
if (message == "Network Error") {
message = "后端接口连接异常";
}
else if (message.includes("timeout")) {
message = "系统接口请求超时";
}
else if (message.includes("Request failed with status code")) {
message = "系统接口" + message.substr(message.length - 3) + "异常";
}
ElMessage.error({
message: message,
duration: 5 * 1000
})
return Promise.reject(error)
}
)
export default service;Salin selepas log masuk
4 Fungsi berkaitan import vue3 automatik (import-auto.d.ts)
- import-auto.d.ts ialah. diletakkan dalam direktori src
- Nota: yarn add unplugin- perlu dipasang auto-import atau npm i unplugin-auto-import -D
- Mulakan semula projek selepas pemasangan
<.>Kodnya adalah seperti berikut:-
declare global {
const computed: typeof import('vue')['computed']
const createApp: typeof import('vue')['createApp']
const customRef: typeof import('vue')['customRef']
const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
const defineComponent: typeof import('vue')['defineComponent']
const effectScope: typeof import('vue')['effectScope']
const EffectScope: typeof import('vue')['EffectScope']
const getCurrentInstance: typeof import('vue')['getCurrentInstance']
const getCurrentScope: typeof import('vue')['getCurrentScope']
const h: typeof import('vue')['h']
const inject: typeof import('vue')['inject']
const isReadonly: typeof import('vue')['isReadonly']
const isRef: typeof import('vue')['isRef']
const markRaw: typeof import('vue')['markRaw']
const nextTick: typeof import('vue')['nextTick']
const onActivated: typeof import('vue')['onActivated']
const onBeforeMount: typeof import('vue')['onBeforeMount']
const onBeforeUnmount: typeof import('vue')['onBeforeUnmount']
const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']
const onDeactivated: typeof import('vue')['onDeactivated']
const onErrorCaptured: typeof import('vue')['onErrorCaptured']
const onMounted: typeof import('vue')['onMounted']
const onRenderTracked: typeof import('vue')['onRenderTracked']
const onRenderTriggered: typeof import('vue')['onRenderTriggered']
const onScopeDispose: typeof import('vue')['onScopeDispose']
const onServerPrefetch: typeof import('vue')['onServerPrefetch']
const onUnmounted: typeof import('vue')['onUnmounted']
const onUpdated: typeof import('vue')['onUpdated']
const provide: typeof import('vue')['provide']
const reactive: typeof import('vue')['reactive']
const readonly: typeof import('vue')['readonly']
const ref: typeof import('vue')['ref']
const resolveComponent: typeof import('vue')['resolveComponent']
const shallowReactive: typeof import('vue')['shallowReactive']
const shallowReadonly: typeof import('vue')['shallowReadonly']
const shallowRef: typeof import('vue')['shallowRef']
const toRaw: typeof import('vue')['toRaw']
const toRef: typeof import('vue')['toRef']
const toRefs: typeof import('vue')['toRefs']
const triggerRef: typeof import('vue')['triggerRef']
const unref: typeof import('vue')['unref']
const useAttrs: typeof import('vue')['useAttrs']
const useCssModule: typeof import('vue')['useCssModule']
const useCssVars: typeof import('vue')['useCssVars']
const useSlots: typeof import('vue')['useSlots']
const watch: typeof import('vue')['watch']
const watchEffect: typeof import('vue')['watchEffect']
}
export {}Salin selepas log masuk
5 Import secara Automatik fungsi Element Plus (components.d.ts)
Nota: Anda perlu memasang npm i unplugin-vue-components -D atau yarn add unplugin-vue-components- Mulakan semula projek selepas pemasangan
-
import '@vue/runtime-core'
declare module '@vue/runtime-core' {
export interface GlobalComponents {
ElCard: typeof import('element-plus/es')['ElCard']
ElCol: typeof import('element-plus/es')['ElCol']
ElContainer: typeof import('element-plus/es')['ElContainer']
ElFooter: typeof import('element-plus/es')['ElFooter']
ElHeader: typeof import('element-plus/es')['ElHeader']
ElMain: typeof import('element-plus/es')['ElMain']
ElOption: typeof import('element-plus/es')['ElOption']
ElPagination: typeof import('element-plus/es')['ElPagination']
ElRadioButton: typeof import('element-plus/es')['ElRadioButton']
ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
ElRow: typeof import('element-plus/es')['ElRow']
ElSelect: typeof import('element-plus/es')['ElSelect']
ElTable: typeof import('element-plus/es')['ElTable']
ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
Loading: typeof import('element-plus/es')['ElLoadingDirective']
}
}
export {}Salin selepas log masuk
6 . konfigurasi fail vite.config.ts
Nota: npm i unplugin-icons perlu dipasang Atau benang tambah unplugin-icons-
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Icons from "unplugin-icons/vite";
import IconsResolver from "unplugin-icons/resolver";
import AutoImport from "unplugin-auto-import/vite";
import Components from "unplugin-vue-components/vite";
import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
import { loadEnv } from 'vite';
import path from 'path';
// 路径
const pathSrc = path.resolve(__dirname,'src')
// https://vitejs.dev/config/
export default({ command, mode }) => {
return defineConfig({
plugins: [
vue(),
AutoImport({
// Auto import functions from Vue, e.g. ref, reactive, toRef...
// 自动导入 Vue 相关函数，如：ref, reactive, toRef 等
imports: ["vue"],
// Auto import functions from Element Plus, e.g. ElMessage, ElMessageBox... (with style)
// 自动导入 Element Plus 相关函数，如：ElMessage, ElMessageBox... (带样式)
resolvers: [
ElementPlusResolver(),
// Auto import icon components
// 自动导入图标组件
IconsResolver({
prefix: "Icon",
}),
],
dts: path.resolve(pathSrc, "auto-imports.d.ts"),
}),
// 自动导入 Element Plus 组件
Components({
resolvers: [
// Auto register icon components
// 自动注册图标组件
IconsResolver({
enabledCollections: ["ep"],
}),
// Auto register Element Plus components
ElementPlusResolver(),
],
dts: path.resolve(pathSrc, "components.d.ts"),
}),
// 图标
Icons({
autoInstall: true,
}),
],
server:{
host: '127.0.0.1',
//port: Number(loadEnv(mode, process.cwd()).VITE_APP_PORT),
port: 3000,
strictPort: true, // 端口被占用直接退出
https: false,
open: true,// 在开发服务器启动时自动在浏览器中打开应用程序
proxy: {
// 字符串简写写法
'^/api': {
target: mode==='development'?loadEnv(mode, process.cwd()).VITE_APP_DEV_URL:loadEnv(mode, process.cwd()).VITE_APP_PROD_URL,
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, '')
}
},
hmr:{
overlay: false // 屏蔽服务器报错
}
},
resolve:{
alias:{
'@': pathSrc,
}
},
css:{
// css预处理器
/*preprocessorOptions: {
scss: {
additionalData: '@import "@/assets/styles/global.scss";'
}
}*/
preprocessorOptions: {
less: {
charset: false,
additionalData: '@import "./src/assets/style/global.less";',
},
},
},
build:{
chunkSizeWarningLimit: 1500, // 分块打包，分解块，将大块分解成更小的块
rollupOptions: {
output:{
manualChunks(id) {
if (id.includes('node_modules')) {
return id.toString().split('node_modules/')[1].split('/')[0].toString();
}
}
}
}
}
})
}Salin selepas log masuk
7. Gunakan pakej axios
lengkapkan fail konfigurasi pembolehubah persekitaran .env.development
7.1 fail pembangunan dalam direktori akar projek adalah seperti berikut
# 开发环境
VITE_APP_TITLE = "阿绵"
# 端口号
VITE_APP_PORT = "3000"
# 请求接口
VITE_APP_DEV_URL = "http://localhost:8088"
# 前缀
VITE_APP_BASE_API = "/api"
Salin selepas log masuk
7.2 Kandungan fail pengeluaran dalam direktori akar projek Seperti berikut
# 开发环境
VITE_APP_TITLE = "阿绵"
# 端口号
VITE_APP_PORT = "3000"
# 请求接口
VITE_APP_DEV_URL = "http://localhost:8088"
# 前缀
VITE_APP_BASE_API = "/api"
Salin selepas log masuk
8. Gunakan antara muka dalam mana-mana fail vue:
// 全局统一分页参数类型声明
declare interface PageParams {
pageNum: number, pageSize: number, type?: Model, // 可选参数
readonly sort?: string // 只读可选参数
} interface Model { type?: string }
export default PageParams;Salin selepas log masuk
Ringkasan
Kandungan utama perbincangan ini ialah:
- aksiosButiran menyepadukan vite vue3.0 ts Langkah pengkapsulan tidak begitu terperinci dari segi perincian Anda boleh mengembangkan dan merangkumnya dengan lebih mendalam
(Perkongsian video pembelajaran:
Pembangunan bahagian hadapan web , Video pengaturcaraan asas )
Atas ialah kandungan terperinci Mari kita bincangkan tentang cara merangkum axios dalam vite vue3.0 ts?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
