vue3+ts的uniapp项目创建

目录

创建

vscode编写uniapp

ui导入

拦截请求拦截器配置

创建

npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project

vscode编写uniapp

ts类型检测

pnpm i -D @types/wechat-miniprogram@uni-helper/uni-app-types

ui导入

npm i @dcloudio/uni-ui

 tsconfig.json

{
  "extends": "@vue/tsconfig/tsconfig.json",
  "compilerOptions": {
    "vuecompileroptions": {
      "experimentalRuntimeMode": "runtime-uni-app"
    },
    "sourceMap": true,
    "baseUrl": ".",
    "paths": {
      "@/*": [
        "./src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom"
    ],
    "types": [
      "@dcloudio/types",
      "@types/wechat-miniprogram",
      "@uni-helper/uni-app-types",
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.d.ts",
    "src/**/*.tsx",
    "src/**/*.vue"
  ]
}

拦截请求拦截器配置

const baseUrl = ''
// 添加拦截器
const httpInterceptor = {
    invoke(options: UniApp.RequestOptions) {
        // 非http开头拼接路径
        if (!options.url.startsWith('http')) {
            options.url = baseUrl + options.url
        }
        // 请求超时
        options.timeout = 10000
        // 添加token
        const token = localStorage.getItem('token')
        if (token) {
            options.header.Authorization = token
        }
        options.header
    }
}
// 拦截requset请求
// 拦截uploadFile请求
uni.addInterceptor('request', httpInterceptor)
uni.addInterceptor('uploadFile', httpInterceptor)


interface Data<T> {
    code: string
    msg: string
    result: T
}
export const http = <T>(options: UniApp.RequestOptions) => {
    // 返回promise对象
    return new Promise<Data<T>>((resolve, reject) => {
        uni.request({
            ...options,
            // 请求成功
            success(res) {
                // code为2xx放行
                if (res.statusCode >= 200 && res.statusCode < 300) { resolve(res.data as Data<T>) }
                else if (res.statusCode == 401) {
                    localStorage.setItem('token', '')
                    uni.navigateTo({ url: '/pages/login/login' })
                    reject(res)
                } else {
                    uni.showToast({
                        icon: 'none',
                        title: (res.data as Data<T>).msg
                    })
                }
            },
            // 响应失败
            fail(err) {
                uni.showToast({
                    icon: 'none',
                    title: "网络错误"
                })
                reject(err)
            }
        })
    })
}