vue3-uniapp-template

简介

vue3-uniapp-template 是基于 vue3 的 uniapp 快速开发模板，包含状态管理、网络请求、路由拦截、UI组件、国际化、Token无感刷新、接口签名等常用功能。

主要使用的技术栈：uniapp、vue3、pinia、vite、vue-i18n、uv-ui 。

项目启动

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

# 切换目录
cd vue3-uniapp-template

# 安装 pnpm
npm install pnpm -g

# 安装依赖
pnpm install

# 启动HBuilderX运行项目

效果预览

目录结构

vue3-uniapp-template
├─ .editorconfig
├─ .env.development					// 运行环境变量
├─ .env.production					// 发行环境变量
├─ .gitignor
├─ .prettierignore
├─ api								      // api管理
│  ├─ index.js
│  └─ modules						    // api模块化
│     ├─ auth.js
│     └─ user.js
├─ App.vue
├─ commitlint.config.js
├─ components						    // 项目组件库
│  ├─ LangSelect					  // 语言切换组件
│  │  └─ LangSelect.vue
├─ hooks							      // hooks管理
│  └─ usePermission.js			// 登录鉴权hook
├─ index.html
├─ LICENSE
├─ lint-staged.config.js
├─ locale							      // 国际化管理
│  ├─ en.json
│  ├─ index.js
│  ├─ ja.json
│  ├─ uni-app.ja.json
│  ├─ zh-Hans.json
│  └─ zh-Hant.json
├─ main.js
├─ manifest.json
├─ package.json
├─ pages							      // 页面管理
│  ├─ 404
│  │  └─ 404.vue
│  ├─ index
│  │  └─ index.vue
│  ├─ login
│  │  └─ login.vue
│  └─ webview
│     └─ webview.vue
├─ pages.json						    // 页面路由
├─ pagesA							      // 分包A页面管理
│  └─ test
│     └─ test.vue
├─ plugins							    // 插件管理
│  ├─ index.js
│  ├─ permission.js					// 路由拦截
│  └─ ui.js							    // UV-UI扩展配置
├─ prettier.config.js
├─ README.md
├─ static							      // 静态资源管理
│  ├─ 404.png
│  └─ logo.png
├─ store							      // store管理
│  ├─ index.js
│  └─ modules						    // store模块化
│     ├─ auth.js
│     └─ user.js
├─ uni.scss
├─ utils                    // 工具管理
│  ├─ cache.js              // 缓存
│  └─ request.js            // 网络请求
└─ vite.config.js

注意事项

• 接口请求地址在根目录下的 .env.xxx 文件配置（development 为 “运行” 环境，production 为 “发行” 环境）
• 打开 uniapp 插件市场，搜索 Prettier，点击 “下载插件并导入HBuilderX” 安装插件，并配置 Prettier 插件

• 设置 HBuilderX 保存时自动格式化

• Git 提交使用 pnpm run commit 命令

• Web端发行时慎选树摇优化，会有奇葩的问题...

• 其他 HBuilderX 插件推荐：eslint-plugin-vue、eslint-js

移除所有示例代码

1. 移除pagesA目录
2. 移除pages/demo目录
3. 移除pages.json中无用路由以及subPackages、tabBar
4. 移除manifest.json中mp-weixin下的permission、requiredPrivateInfos配置
5. 修改首页、登录页内容