基于 vue3 的 uniapp 開(kāi)發(fā)模板

vue3-uniapp-template

簡(jiǎn)介

vue3-uniapp-template 是基于 vue3 的 uniapp 快速開(kāi)發(fā)模板，包含狀態(tài)管理、網(wǎng)絡(luò)請(qǐng)求、路由攔截、UI組件、國(guó)際化、token 無(wú)感刷新、接口簽名等常用功能。

主要使用的技術(shù)棧：uniapp、vue3、pinia、vite、vue-i18n、uv-ui 。

下載地址

PS：如果對(duì)你有幫助的話，點(diǎn)個(gè)Star支持下哈~

Github
Gitee

項(xiàng)目啟動(dòng)

# 克隆代碼
git clone https://github.com/cshaptx4869/vue3-uniapp-template.git

# 切換目錄
cd vue3-uniapp-template

# 安裝依賴（使用pnpm也行，但在使用過(guò)程中發(fā)現(xiàn)一些奇葩的問(wèn)題，比如安裝某個(gè)包后引入使用時(shí)，會(huì)報(bào)某個(gè)依賴庫(kù)找不到錯(cuò)誤，也不清楚是不是HBuilderX的Bug）
npm install

# 啟動(dòng)HBuilderX運(yùn)行項(xiàng)目

效果預(yù)覽

目錄結(jié)構(gòu)

vue3-uniapp-template
├─ .commitlintrc.js
├─ .editorconfig
├─ .env.development					   // 運(yùn)行環(huán)境變量
├─ .env.production					   // 發(fā)行環(huán)境變量
├─ .gitignore
├─ .lintstagedrc.js
├─ .prettierignore
├─ .prettierrc.js
├─ api								   // api管理
│  ├─ index.js
│  └─ modules						   // api模塊化
│     ├─ auth.js
│     └─ user.js
├─ App.vue
├─ components						   // 項(xiàng)目組件庫(kù)
│  ├─ LangSelect					   // 語(yǔ)言切換組件
│  │  └─ LangSelect.vue
├─ hooks							   // hooks管理
│  └─ usePermission.js			       // 登錄鑒權(quán)hook
├─ index.html
├─ LICENSE
├─ locale							   // 國(guó)際化管理
│  ├─ en.json
│  ├─ index.js
│  ├─ ja.json
│  ├─ uni-app.ja.json
│  ├─ zh-Hans.json
│  └─ zh-Hant.json
├─ main.js
├─ manifest.json
├─ package.json
├─ pages							   // 頁(yè)面管理
│  ├─ 404
│  │  └─ 404.vue
│  ├─ index
│  │  └─ index.vue
│  ├─ login
│  │  └─ login.vue
│  └─ webview
│     └─ webview.vue
├─ pages.json						   // 頁(yè)面路由
├─ pagesA							   // 分包A頁(yè)面管理
│  └─ test
│     └─ test.vue
├─ plugins							   // 插件管理
│  ├─ index.js
│  ├─ permission.js					   // 路由攔截
│  └─ ui.js							   // UV-UI擴(kuò)展配置
├─ README.md
├─ static							   // 靜態(tài)資源管理
│  ├─ 404.png
│  └─ logo.png
├─ store							   // store管理
│  ├─ index.js
│  └─ modules						   // store模塊化
│     ├─ auth.js
│     └─ user.js
├─ uni.scss
├─ utils                               // 工具管理
│  ├─ cache.js                         // 緩存
│  └─ request.js                       // 網(wǎng)絡(luò)請(qǐng)求
└─ vite.config.js

這邊提一嘴，uniapp 默認(rèn)啟用easycom 組件規(guī)范

只要組件安裝在項(xiàng)目的 components 目錄下或 uni_modules 目錄下，并符合components/組件名稱/組件名稱.(vue|uvue)目錄結(jié)構(gòu)。就可以不用引用、注冊(cè)，直接在頁(yè)面中使用。
如果你的組件名稱或路徑不符合 easycom 的默認(rèn)規(guī)范，可以在 pages.json 的 easycom 節(jié)點(diǎn)進(jìn)行個(gè)性化設(shè)置，自定義匹配組件的策略。

登錄鑒權(quán)

頁(yè)面是否需要登錄，只需在 pages.json 文件中需要鑒權(quán)的頁(yè)面下設(shè)置 needLogin 為 true 即可，比如

{
  "pages": [
    {
      "path": "pages/test/test",
      "needLogin": true,
      "style": {
        "navigationBarTitleText": "",
      },
    }
  ]
}

注意：攔截 uni.switchTab 本身沒(méi)有問(wèn)題。但是在微信小程序端點(diǎn)擊 tabbar 的底層邏輯并不是觸發(fā) uni.switchTab。所以誤認(rèn)為攔截?zé)o效，此類場(chǎng)景的解決方案是在 tabbar 頁(yè)面的頁(yè)面生命周期 onShow 中處理。

<template>
  <view class="container">
    <view>我是Tabbar頁(yè)面</view>
  </view>
</template>

<script setup lang="ts">
// 引入鑒權(quán)hooks
import { usePermission } from "@/hooks/usePermission";
import { onShow } from "@dcloudio/uni-app";

onShow(async () => {
  console.log("tabbar page onShow");
  const hasPermission = await usePermission();
  console.log(hasPermission ? "已登錄" : "未登錄，攔截跳轉(zhuǎn)");
  // 以下開(kāi)始寫業(yè)務(wù)邏輯...
});
</script>

<style lang="scss" scoped></style>

網(wǎng)絡(luò)請(qǐng)求

網(wǎng)絡(luò)請(qǐng)求封裝文件：utils/request.js 文件

默認(rèn)未啟用接口簽名，可以修改 API_SAFE 為 true 啟用，并建議修改 API_KEY 值。
默認(rèn)未啟用 refresh token，可以修改 ENABLED_REFRESH_TOKEN 為 true 啟用。
根據(jù)實(shí)際業(yè)務(wù)情況修改 HeaderEnum、CodeEnum 中對(duì)應(yīng)的內(nèi)容。

注意事項(xiàng)

接口請(qǐng)求地址在根目錄下的 .env.xxx 文件配置（development 為 “運(yùn)行” 環(huán)境，production 為 “發(fā)行” 環(huán)境）
打開(kāi) uniapp 插件市場(chǎng)，搜索 Prettier，點(diǎn)擊 “下載插件并導(dǎo)入HBuilderX” 安裝插件，并配置 Prettier 插件