UniApp 进阶实战篇：Vue3 + Pinia + uViewPlus 构建企业级多端项目

2025年10月25日 112点热度 0人点赞 0条评论

一、前言：从 Demo 到企业级项目的转变

初学时我们关心的是「能跑通」，但企业项目关注的是：

可维护性
可扩展性
多人协作规范
跨端兼容与性能优化

本篇将带你用 Vue3 + Pinia + uView Plus 打造一个真正可落地的 UniApp 企业级模板结构。

二、技术栈选择

技术	说明	理由
Vue3	核心框架	组合式 API 更易维护
Pinia	状态管理	官方推荐，类型友好
uView Plus	UI 组件库	跨端一致，支持 Vue3
uni-request 封装	网络层	支持拦截、token刷新
dotenv + vite.config	环境区分	方便配置多环境构建

三、项目初始化

1. 创建项目

在 HBuilderX 中选择 Vue3 + Vite 模板 创建项目。
或使用 CLI：

Bash

npm init uni-app@latest my-enterprise-app
cd my-enterprise-app
npm install

npm init uni-app@latest my-enterprise-app
cd my-enterprise-app
npm install

2. 安装依赖

Bash

npm install pinia uview-plus

npm install pinia uview-plus

3. 启用 uView Plus

在 main.js 中：

JavaScript

import { createSSRApp } from 'vue'
import App from './App.vue'
import uviewPlus from 'uview-plus'
import { createPinia } from 'pinia'

export function createApp() {
  const app = createSSRApp(App)
  app.use(uviewPlus)
  app.use(createPinia())
  return { app }
}

import { createSSRApp } from 'vue'
import App from './App.vue'
import uviewPlus from 'uview-plus'
import { createPinia } from 'pinia'

export function createApp() {
  const app = createSSRApp(App)
  app.use(uviewPlus)
  app.use(createPinia())
  return { app }
}

四、项目结构设计

企业项目要有清晰的目录：

src/
├── api/                # 接口定义
│   ├── user.js
│   └── order.js
├── store/              # Pinia 状态
│   ├── user.js
│   └── app.js
├── components/         # 通用组件
├── pages/              # 页面模块
│   ├── login/
│   ├── home/
│   └── mine/
├── utils/              # 工具方法
│   ├── request.js
│   ├── auth.js
│   └── storage.js
├── config/             # 配置
│   ├── config.js
└── main.js

五、统一网络请求层（request 封装）

JavaScript

// utils/request.js
const BASE_URL = import.meta.env.VITE_API_URL

export const request = (options) => {
  return new Promise((resolve, reject) => {
    uni.request({
      url: BASE_URL + options.url,
      method: options.method || 'GET',
      data: options.data || {},
      header: {
        'Authorization': uni.getStorageSync('token') || '',
        'Content-Type': 'application/json'
      },
      success: (res) => {
        if (res.statusCode === 200) {
          resolve(res.data)
        } else if (res.statusCode === 401) {
          uni.showToast({ title: '登录失效，请重新登录', icon: 'none' })
          uni.reLaunch({ url: '/pages/login/login' })
        } else {
          uni.showToast({ title: res.data.message || '请求错误', icon: 'none' })
          reject(res)
        }
      },
      fail: reject
    })
  })
}

// utils/request.js
const BASE_URL = import.meta.env.VITE_API_URL

export const request = (options) => {
  return new Promise((resolve, reject) => {
    uni.request({
      url: BASE_URL + options.url,
      method: options.method || 'GET',
      data: options.data || {},
      header: {
        'Authorization': uni.getStorageSync('token') || '',
        'Content-Type': 'application/json'
      },
      success: (res) => {
        if (res.statusCode === 200) {
          resolve(res.data)
        } else if (res.statusCode === 401) {
          uni.showToast({ title: '登录失效，请重新登录', icon: 'none' })
          uni.reLaunch({ url: '/pages/login/login' })
        } else {
          uni.showToast({ title: res.data.message || '请求错误', icon: 'none' })
          reject(res)
        }
      },
      fail: reject
    })
  })
}

调用示例：

JavaScript

import { request } from '@/utils/request.js'
export const getUserInfo = () => request({ url: '/user/info' })

import { request } from '@/utils/request.js'
export const getUserInfo = () => request({ url: '/user/info' })

六、状态管理：Pinia 实战

JavaScript

// store/user.js
import { defineStore } from 'pinia'
import { getUserInfo } from '@/api/user.js'

export const useUserStore = defineStore('user', {
  state: () => ({
    info: null,
    token: uni.getStorageSync('token') || ''
  }),
  actions: {
    async fetchUser() {
      const res = await getUserInfo()
      this.info = res.data
    },
    setToken(t) {
      this.token = t
      uni.setStorageSync('token', t)
    }
  }
})

// store/user.js
import { defineStore } from 'pinia'
import { getUserInfo } from '@/api/user.js'

export const useUserStore = defineStore('user', {
  state: () => ({
    info: null,
    token: uni.getStorageSync('token') || ''
  }),
  actions: {
    async fetchUser() {
      const res = await getUserInfo()
      this.info = res.data
    },
    setToken(t) {
      this.token = t
      uni.setStorageSync('token', t)
    }
  }
})

使用：

JavaScript

<script setup>
import { useUserStore } from '@/store/user.js'
const user = useUserStore()

onMounted(() => {
  user.fetchUser()
})
</script>

<script setup>
import { useUserStore } from '@/store/user.js'
const user = useUserStore()

onMounted(() => {
  user.fetchUser()
})
</script>

七、UI 层：使用 uView Plus 组件

uView Plus 组件支持全端统一样式，例如：

Vue

<template>
  <view class="login">
    <u--form>
      <u-form-item label="账号">
        <u--input v-model="username" />
      </u-form-item>
      <u-form-item label="密码">
        <u--input v-model="password" type="password" />
      </u-form-item>
    </u--form>
    <u-button type="primary" @click="login">登录</u-button>
  </view>
</template>

<script setup>
import { useUserStore } from '@/store/user.js'
const user = useUserStore()
const username = ref('')
const password = ref('')

const login = async () => {
  const res = await uni.request({ url: '/login', method: 'POST', data: { username, password } })
  user.setToken(res.data.token)
  uni.switchTab({ url: '/pages/home/home' })
}
</script>

<template>
  <view class="login">
    <u--form>
      <u-form-item label="账号">
        <u--input v-model="username" />
      </u-form-item>
      <u-form-item label="密码">
        <u--input v-model="password" type="password" />
      </u-form-item>
    </u--form>
    <u-button type="primary" @click="login">登录</u-button>
  </view>
</template>

<script setup>
import { useUserStore } from '@/store/user.js'
const user = useUserStore()
const username = ref('')
const password = ref('')

const login = async () => {
  const res = await uni.request({ url: '/login', method: 'POST', data: { username, password } })
  user.setToken(res.data.token)
  uni.switchTab({ url: '/pages/home/home' })
}
</script>

八、多环境配置（开发 / 生产）

在根目录添加：

.env.development
.env.production

内容示例：

VITE_API_URL=https://dev-api.example.com

然后在 vite.config.js 读取：

JavaScript

export default defineConfig({
  define: {
    'process.env': process.env
  }
})

export default defineConfig({
  define: {
    'process.env': process.env
  }
})

编译时自动根据命令区分环境：

Bash

npm run dev:h5
npm run build:mp-weixin

npm run dev:h5
npm run build:mp-weixin

九、性能与工程优化

✅ 懒加载路由：
pages.json 中可使用 subPackages 拆分模块。

✅ 图片压缩与缓存：
静态资源放 static/，结合 CDN。

✅ 分端样式优化：
利用 platform 条件编译：

<!-- #ifdef MP-WEIXIN -->
<view>微信端样式</view>
<!-- #endif -->

✅ 统一日志与错误捕获：
封装 utils/log.js，在 App.vue 捕获 onError。

十、项目发布与自动化部署

小程序 → 通过微信开发者工具上传 /dist/build/mp-weixin
H5 → 直接部署 /dist/build/h5
App → HBuilderX 云打包（支持证书配置）

如需自动化部署，可在 GitHub Actions / GitLab CI 中添加：

YAML

- name: Build UniApp
  run: npm run build:h5
- name: Deploy to Vercel
  uses: amondnet/vercel-action@v25

- name: Build UniApp
  run: npm run build:h5
- name: Deploy to Vercel
  uses: amondnet/vercel-action@v25

十一、总结：从“能跑”到“能维护”

阶段	特点	关键点
入门阶段	写一页能跑	理解页面生命周期
实战阶段	项目可扩展	模块化目录、封装 request
企业级	多人协作	组件化 + 规范化 + 自动化部署

UniApp + Vue3 + Pinia + uViewPlus 的组合，在效率与可维护性上达到了理想平衡。
它既能快速 MVP 验证，又能支撑中大型项目。