基於 vue3 的 uniapp 開發模板

簡介

vue3-uniapp-template是基於vue3的uniapp快速開發模板，包含狀態管理、網絡請求、路由攔截、UI組件等常用功能。
主要使用的技術棧：uniapp、vue3、pinia、vite、uv-ui

下載地址

PS：如果對你有幫助的話，點個Star支持下哈~

• Github
• Gitee

目錄結構

|-- api                          // 接口管理
|   |-- index.js
|   |-- modules                  // api模塊化目錄
|       |-- user.js
|-- components                   // 項目組件庫
|   |-- HelloWorld               // 測試組件
|       |-- HelloWorld.vue
|-- hooks                        
|   |-- usePermission.js         // 微信小程序端點擊tabbar的底層邏輯不觸發uni.switchTab的特殊處理
|-- pages
|   |-- index
|   |   |-- index.vue
|   |-- login
|       |-- login.vue
|-- pagesA                       // 分包A
|   |-- test
|       |-- test.vue
|-- plugins                      // 插件管理
|   |-- http.js                  // 請求
|   |-- index.js                 
|   |-- router.js                // 路由攔截
|   |-- store.js                 // 狀態管理  
|-- static
|   |-- logo.png
|-- store                        // pinia
|   |-- index.js
|   |-- modules                  // store模塊化目錄
|       |-- user.js
|-- uni_modules
|-- utils
    |-- cache.js                 // 緩存管理工具

項目啓動

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

# 切換目錄
cd vue3-uniapp-template

# 安裝 pnpm
npm install pnpm -g

# 安裝依賴
pnpm install

# 啓動HBuilderX運行

效果預覽

注意事項

• 接口請求地址在根目錄下的 .env.xxx 文件配置（development 爲 “運行” 環境，production 爲 “發行” 環境）

• 打開 uniapp 插件市場，搜索 Prettier，點擊 “下載插件並導入HBuilderX” 安裝插件，並配置 Prettier 插件
  

• 設置 HBuilderX 保存時自動格式化

• Git 提交使用 pnpm run commit 命令