# uniapp-template

**Repository Path**: chen-ge-project/uniapp-template

## Basic Information

- **Project Name**: uniapp-template
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2024-07-19
- **Last Updated**: 2025-06-11

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 🌈 mobile-universal-template

### 介绍

mobile-universal-template 一款基于 Vue3、TypeScript、Vite4、Pinia、Uniapp 小程序的项目基础框架，内置了 uni-ui 组件库

### 安装使用步骤 📔

**Install：**

```text
npm install

# npm install 安装失败，请升级 nodejs 到 16 以上

建议使用 pnpm 作为安装依赖包工具，使用 yarn、npm 没有 lock 可能会安装到最新版依赖。
```

**Run：**

```text
npm run dev:mp-weixin
```

使用微信开发者工具导入项目文件目录下 dist\dev\mp-weixin 文件


### 文件资源目录 📚

```shell
mobile-universal-template
├─ .husky                 # husky 配置文件
├─ .vscode                # VSCode 推荐配置
├─ public                 # 静态资源文件（该文件夹不会被打包）
├─ src
│  ├─ api                 # API 接口管理
│  ├─ components          # 全局组件
│  ├─ config              # 全局配置项
│  ├─ enums               # 项目常用枚举
│  ├─ hooks               # 常用 Hooks 封装
│  ├─ router              # 路由管理
│  ├─ store               # pinia store
│  ├─ static              # 静态资源文件
│  ├─ styles              # 全局样式文件
│  ├─ types               # 全局 ts 声明
│  ├─ utils               # 常用工具库
│  ├─ pages               # 项目主包页面
│  ├─ pagesOther          # 项目分包页面
│  ├─ App.vue             # 项目主组件
│  ├─ vite-env.d.ts       # 指定 ts 识别 vue
│  ├─ auto-import.d.ts    # 插件自动导入
│  ├─ components.d        # 组件自动导入
│  └─ main.ts             # 项目入口文件
├─ .env                   # vite 常用配置
├─ .env.development       # 开发环境配置
├─ .env.production        # 生产环境配置
├─ .gitignore             # 忽略 git 提交
├─ index.html             # 入口 html
├─ package-lock.json      # 依赖包包版本锁
├─ package.json           # 依赖包管理
├─ eslint.config.js       # eslint 配置
├─ commitlint.config.js  # git提交配置
├─ README.md              # README 介绍
├─ tsconfig.json          # typescript 全局配置
├─ unocss.config.js       # unocss 全局配置
└─ vite.config.ts         # vite 全局配置文件
```

### 路由跳转

框架对小程序的路由跳转进行了重新封装，可使用 vue-router 的跳转方式进行跳转

|      小程序      | vue-router |                       说明                       |
| :--------------: | :--------: | :----------------------------------------------: |
|  uni.navigateTo  |    push    |       保留当前页面，跳转到应用内的某个页面       |
|  uni.redirectTo  |  replace   |       关闭当前页面，跳转到应用内的某个页面       |
|   uni.reLaunch   | replaceAll |       关闭所有页面，打开到应用内的某个页面       |
|  uni.switchTab   |  pushTab   | 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面 |
| uni.navigateBack |    back    |       关闭当前页面，返回上一页面或多级页面       |

#### 使用

```js
// 打开新页面
router.push("/pageSubs/testPage/index")
router.replace("/pageSubs/testPage/index")

// 跳转Tabbar页面
router.pushTab("/pages/demo/index")
```