devbox
秋刀鱼在做梦
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

uni-app基础框架搭建（vue3+ts+vite）_uniapp vite

作者：秋刀鱼在做梦 | 2024-07-25 13:38:14

赞

踩

uniapp vite

1.基础准备

uni-app官网uni-app,uniCloud,serverless,环境安装,创建uni-app,自定义模板,国内特殊情况,更新依赖到指定版本,运行、发布uni-app,运行并发布快应用,运行并发布快应用(webview),运行并发布快应用(webview)-华为,cli创建项目和HBuilderX可视化界面创icon-default.png?t=N7T8https://uniapp.dcloud.net.cn/quickstart-cli.html        安装node、hbuilder

        安装pnpm，相比于npm他的优点是：显著提升了包安装的速度和磁盘空间利用率，同时避免了依赖冲突和重复安装的问题；

npm install -g pnpm

        创建uniapp vue3+ts项目

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

2.引入uni-ui 组件库

        安装 uni-ui 组件库

pnpm i @dcloudio/uni-ui

        src/pages.json

  1. // pages.json
  2. {
  3.   // 组件自动导入
  4.   "easycom": {
  5.     "autoscan": true,
  6.     "custom": {
  7.       // uni-ui 规则如下配置  // [!code ++]
  8.       "^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue" // [!code ++]
  9.     }
  10.   },
  11.   "pages": [
  12.     // …省略
  13.   ]
  14. }

        安装类型声明文件

pnpm i -D @uni-helper/uni-ui-types

        配置类型声明文件

  1. // tsconfig.json
  2. {
  3.   "compilerOptions": {
  4.     // ...
  5.     "types": [
  6.       "@dcloudio/types", // uni-app API 类型
  7.       "miniprogram-api-typings", // 原生微信小程序类型
  8.       "@uni-helper/uni-app-types", // uni-app 组件类型
  9.       "@uni-helper/uni-ui-types" // uni-ui 组件类型  // [!code ++]
  10.     ]
  11.   },
  12.   // vue 编译器类型，校验标签类型
  13.   "vueCompilerOptions": {
  14.     "nativeTags": ["block", "component", "template", "slot"]
  15.   }
  16. }

3.小程序端 Pinia 持久化

        安装持久化存储插件，pinia-plugin-persistedstate

pnpm i pinia-plugin-persistedstate

        src/stores/modules/member.ts

  1. import type { LoginResult } from '@/types/member'
  2. import { defineStore } from 'pinia'
  3. import { ref } from 'vue'
  4.  
  5. // 定义 Store
  6. export const useMemberStore = defineStore(
  7.   'member',
  8.   () => {
  9.     // 会员信息
  10.     const profile = ref<LoginResult>()
  11.  
  12.     // 保存会员信息，登录时使用
  13.     const setProfile = (val: LoginResult) => {
  14.       profile.value = val
  15.     }
  16.  
  17.     // 清理会员信息，退出时使用
  18.     const clearProfile = () => {
  19.       profile.value = undefined
  20.     }
  21.  
  22.     // 记得 return
  23.     return {
  24.       profile,
  25.       setProfile,
  26.       clearProfile,
  27.     }
  28.   },
  29.   {
  30.     // 网页端配置
  31.     // persist: true,
  32.     // 小程序端配置
  33.     persist: {
  34.       storage: {
  35.         getItem(key) {
  36.           return uni.getStorageSync(key)
  37.         },
  38.         setItem(key, value) {
  39.           uni.setStorageSync(key, value)
  40.         },
  41.       },
  42.     },
  43.   },
  44. )

        src/stores/index.ts

  1. import { createPinia } from 'pinia'
  2. import persist from 'pinia-plugin-persistedstate'
  3.  
  4. // 创建 pinia 实例
  5. const pinia = createPinia()
  6. // 使用持久化存储插件
  7. pinia.use(persist)
  8.  
  9. // 默认导出，给 main.ts 使用
  10. export default pinia
  11.  
  12. // 模块统一导出
  13. export * from './modules/member'

        src/main.ts

  1. import { createSSRApp } from 'vue'
  2. import App from './App.vue'
  3.  
  4. // 导入 pinia 实例
  5. import pinia from './stores'
  6.  
  7. export function createApp() {
  8.   // 创建 vue 实例
  9.   const app = createSSRApp(App)
  10.  
  11.   // 使用 pinia
  12.   app.use(pinia)
  13.  
  14.   return {
  15.     app,
  16.   }
  17. }

4.uni.request 请求封装

        创建拦截器，src/utils/http.ts

  1. /**
  2.  * 添加拦截器:
  3.  *   拦截 request 请求
  4.  *   拦截 uploadFile 文件上传
  5.  *
  6.  * TODO:
  7.  *   1. 非 http 开头需拼接地址
  8.  *   2. 请求超时
  9.  *   3. 添加小程序端请求头标识
  10.  *   4. 添加 token 请求头标识
  11.  */
  12.  
  13. import { useMemberStore } from '@/stores'
  14.  
  15. const baseURL = 'https://pcapi-xiaotuxian-front-devtest.itheima.net'
  16.  
  17. // 添加拦截器
  18. const httpInterceptor = {
  19.   // 拦截前触发
  20.   invoke(options: UniApp.RequestOptions) {
  21.     // 1. 非 http 开头需拼接地址
  22.     if (!options.url.startsWith('http')) {
  23.       options.url = baseURL + options.url
  24.     }
  25.     // 2. 请求超时, 默认 60s
  26.     options.timeout = 10000
  27.     // 3. 添加小程序端请求头标识
  28.     options.header = {
  29.       ...options.header,
  30.       'source-client': 'miniapp',
  31.     }
  32.     // 4. 添加 token 请求头标识
  33.     const memberStore = useMemberStore()
  34.     const token = memberStore.profile?.token
  35.     if (token) {
  36.       options.header.Authorization = token
  37.     }
  38.   },
  39. }
  40. uni.addInterceptor('request', httpInterceptor)
  41. uni.addInterceptor('uploadFile', httpInterceptor)
  42.  
  43. /**
  44.  * 请求函数
  45.  * @param  UniApp.RequestOptions
  46.  * @returns Promise
  47.  *  1. 返回 Promise 对象
  48.  *  2. 获取数据成功
  49.  *    2.1 提取核心数据 res.data
  50.  *    2.2 添加类型，支持泛型
  51.  *  3. 获取数据失败
  52.  *    3.1 401错误  -> 清理用户信息，跳转到登录页
  53.  *    3.2 其他错误 -> 根据后端错误信息轻提示
  54.  *    3.3 网络错误 -> 提示用户换网络
  55.  */
  56. type Data<T> = {
  57.   code: string
  58.   errorMessage: string
  59.   data: T
  60. }
  61. // 2.2 添加类型，支持泛型
  62. export const http = <T>(options: UniApp.RequestOptions) => {
  63.   // 1. 返回 Promise 对象
  64.   return new Promise<Data<T>>((resolve, reject) => {
  65.     uni.request({
  66.       ...options,
  67.       // 响应成功
  68.       success(res) {
  69.         // 状态码 2xx， axios 就是这样设计的
  70.         if (res.statusCode >= 200 && res.statusCode < 300) {
  71.           // 2.1 提取核心数据 res.data
  72.           resolve(res.data as Data<T>)
  73.         } else if (res.statusCode === 401) {
  74.           // 401错误  -> 清理用户信息，跳转到登录页
  75.           const memberStore = useMemberStore()
  76.           memberStore.clearProfile()
  77.           uni.navigateTo({ url: '/user/login' })
  78.           reject(res)
  79.         } else {
  80.           // 其他错误 -> 根据后端错误信息轻提示
  81.           uni.showToast({
  82.             icon: 'none',
  83.             title: (res.data as Data<T>).errorMessage || '请求错误',
  84.           })
  85.           reject(res)
  86.         }
  87.       },
  88.       // 响应失败
  89.       fail(err) {
  90.         uni.showToast({
  91.           icon: 'none',
  92.           title: '网络错误，换个网络试试',
  93.         })
  94.         reject(err)
  95.       },
  96.     })
  97.   })
  98. }

6.统一代码风格

        安装 eslint+prettier

pnpm i -D eslint prettier eslint-plugin-vue @vue/eslint-config-prettier @vue/eslint-config-typescript @rushstack/eslint-patch @vue/tsconfig

        新建文件.eslintrc.cjs ，添加以下 eslint 配置

  1. /* eslint-env node */
  2. require('@rushstack/eslint-patch/modern-module-resolution')
  3.  
  4. module.exports = {
  5.   root: true,
  6.   extends: [
  7.     'plugin:vue/vue3-essential',
  8.     'eslint:recommended',
  9.     '@vue/eslint-config-typescript',
  10.     '@vue/eslint-config-prettier',
  11.   ],
  12.   // 小程序全局变量
  13.   globals: {
  14.     uni: true,
  15.     wx: true,
  16.     WechatMiniprogram: true,
  17.     getCurrentPages: true,
  18.     UniApp: true,
  19.     UniHelper: true,
  20.   },
  21.   parserOptions: {
  22.     ecmaVersion: 'latest',
  23.   },
  24.   rules: {
  25.     'prettier/prettier': [
  26.       'warn',
  27.       {
  28.         singleQuote: true,
  29.         semi: false,
  30.         printWidth: 100,
  31.         trailingComma: 'all',
  32.         endOfLine: 'auto',
  33.       },
  34.     ],
  35.     'vue/multi-word-component-names': ['off'],
  36.     'vue/no-setup-props-destructure': ['off'],
  37.     'vue/no-deprecated-html-element-is': ['off'],
  38.     '@typescript-eslint/no-unused-vars': ['off'],
  39.   },
  40. }

        配置package.json（eslint8版本--ext命令不支持，用下面的）

  1. {
  2.   "script": {
  3.     // ... 省略 ...
  4.     "lint": "eslint . --ext .vue,.js,.ts --fix --ignore-path .gitignore"
  5.   }
  6. }
  1. {
  2.   "scripts": {
  3.     // ... 省略 ...
  4.     "lint": "eslint . --fix --ignore-path .gitignore"
  5.   }
  6. }

pnpm lint

7.Git 工作流规范

        安装并初始化 husky

pnpm dlx husky-init

npx husky-init

        安装 lint-staged

pnpm i -D lint-staged

         配置package.json

  1. {
  2.   "script": {
  3.     // ... 省略 ...
  4.   },
  5.   "lint-staged": {
  6.     "*.{vue,ts,js}": ["eslint --fix"]
  7.   }
  8. }

        修改 .husky/pre-commit 文件  

#!/usr/bin/env sh

. "$(dirname -- "$0")/_/husky.sh"

pnpm lint-staged

本文内容由网友自发贡献，转载请注明出处：【wpsshop博客】
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号