uniapp+Vue3实战：前台应用、后台管理系统与接口文档

当前移动端开发领域，uniapp + Vue 3的组合已经是非常主流的技术方案。企业级项目中，通常还需要配套一个后台管理系统来完成数据管理、内容发布、用户运营等工作，而前后端之间的联调效率，则高度依赖一份结构清晰的接口文档。本文将围绕“uniapp + Vue 3 前台应用 + 后台管理系统 + 接口文档”这条完整链路，从环境搭建、核心配置、实战编码到联调排错，整理一套可直接参考的学习与实践教程。

无论你是刚接触小程序和跨端开发的新手，还是已经在使用 Vue 2 想升级到 Vue 3 的开发者，这篇文章都会尽量把关键步骤和踩坑点讲清楚。

1. 背景与核心概念

1.1 为什么要学习 uniapp + Vue 3

传统的移动端开发模式，通常需要分别维护 iOS、Android、微信小程序等多套代码。uniapp的核心价值在于：使用一套 Vue 语法，将业务代码编译到多个平台，从而显著降低多端维护成本。

而Vue 3是 Vue 框架的大版本升级，带来了组合式 API（Composition API）、更高效的响应式系统、更好的 TypeScript 支持等能力。uniapp在较新的版本中已经支持Vue 3，因此我们可以直接使用 Vue 3 的语法来编写跨端应用。

简单概括一下二者的分工：

1.2 前台 + 后台管理系统的常见架构

在企业级项目中，通常有两种角色的应用：

• 前台应用：面向 C 端用户，运行在微信小程序、H5、App 上，使用 uniapp 开发。
• 后台管理系统：面向运营、管理员，运行在浏览器中，通常使用 Vue 3 + Element Plus + Vite 开发。

两类应用共享同一套后端接口服务。为了让前后端开发并行高效推进，团队一般会维护一份“接口文档”，里面定义每个接口的 URL、请求方法、请求参数、返回结构、错误码等。

这种架构的好处是职责分明：前端只需要关注页面交互和接口调用，后端只需要关注业务逻辑和数据存储。而接口文档就是两边的契约。

1.3 接口文档在开发流程中的地位

接口文档不仅是“开发说明书”，更是联调阶段的排错依据。实际开发中，大量时间消耗在“参数名对不上”“返回结构变了”“字段类型不对”这类问题上。如果接口文档齐全，这些问题的排查成本会大幅下降。

常见的接口文档工具包括：

• Swagger / OpenAPI：后端生成，接口说明自动同步。
• Apifox / Apipost：支持接口调试、Mock 数据、文档分享。
• YApi：比较老牌的接口管理平台，支持 Mock。
• Postman：适合接口调试，文档能力相对基础。

在本文的实战环节中，我会围绕“接口文档驱动开发”的思路，演示前台和后台如何对接同一套接口。

2. 环境准备与工程创建

2.1 开发工具准备

在开始编码之前，需要先准备好开发环境。这里以最常见的 Windows / macOS 环境为例。

步骤一：安装 Node.js

Vue 3、Vite 和 uniapp 的 CLI 工具都依赖 Node.js 环境。建议安装 Node.js 的 LTS 稳定版本。

node -v npm -v

这两个命令能正常输出版本号，说明 Node.js 安装成功。

步骤二：安装 HBuilderX

uniapp 官方推荐使用 HBuilderX 作为 IDE。也可以使用命令行工具vue-cli或vite创建 uniapp 项目，但 HBuilderX 对 uni-app 的编译支持最完整，尤其是打包小程序和 App 时，很多原生配置依赖 HBuilderX 的可视化界面。

步骤三：安装 Vue 3 后台管理系统的构建工具

后台管理系统建议直接使用 Vite 创建：

npm create vite@latest admin-system -- --template vue cd admin-system npm install npm run dev

版本需要根据你的项目实际情况调整，本文示例以常见环境为例，重点演示配置思路。

2.2 创建 uniapp 前台项目

在 HBuilderX 中新建项目，选择uni-app模板，模板类型选择Vue 3，这样生成的项目就会基于 Vue 3 语法。

如果是命令行方式创建，可以参考 Vue CLI 创建 uniapp 项目：

npx degit dcloudio/uni-preset-vue#vite my-vue3-project cd my-vue3-project npm install npm run dev:mp-weixin

其中dev:mp-weixin表示编译到微信小程序平台，编译后的代码会输出到dist/dev/mp-weixin目录。

2.3 项目目录结构说明

一个典型的 uniapp Vue 3 项目目录结构如下：

my-vue3-project/ ├── src/ │ ├── pages/ # 页面文件 │ ├── static/ # 静态资源 │ ├── store/ # 状态管理（Pinia） │ ├── utils/ # 工具函数 │ ├── App.vue # 应用入口组件 │ ├── main.js # 入口文件 │ ├── manifest.json # 应用配置：AppID、权限、SDK 等 │ ├── pages.json # 页面路由、导航栏、tabBar 配置 │ └── uni.scss # 全局样式变量 ├── index.html ├── package.json └── vite.config.js

pages.json是 uniapp 项目的核心配置文件，相当于 Vue 项目中的路由表 + 导航栏配置。下面在核心配置部分详细展开。

3. 核心配置与 Vue 3 组合式 API 基础

3.1 pages.json：页面路由与导航配置

pages.json 负责页面注册、路由跳转规则、窗口样式、tabBar 等。每次新增页面，都需要在pages数组中注册，否则会报page not found一类错误。

{ "pages": [ { "path": "pages/index/index", "style": { "navigationBarTitleText": "首页" } }, { "path": "pages/list/list", "style": { "navigationBarTitleText": "列表页", "enablePullDownRefresh": true } }, { "path": "pages/detail/detail", "style": { "navigationBarTitleText": "详情页" } } ], "globalStyle": { "navigationBarTextStyle": "black", "navigationBarTitleText": "uni-app 实战", "navigationBarBackgroundColor": "#FFFFFF", "backgroundColor": "#F5F5F5" }, "tabBar": { "color": "#999999", "selectedColor": "#3B82F6", "list": [ { "pagePath": "pages/index/index", "text": "首页" }, { "pagePath": "pages/list/list", "text": "列表" } ] } }

这里的path是页面所在路径，style可以单独设置每个页面的标题栏、下拉刷新等行为。globalStyle是全局默认样式，tabBar则用来配置底部导航。

3.2 manifest.json：应用级配置

manifest.json是 uniapp 的应用配置文件，包含应用的名称、AppID、平台 SDK 配置、权限声明等。在打包微信小程序时，需要在这里配置小程序的 AppID；在打包 App 时，需要配置包名、图标、启动图等。

需要注意的是，manifest.json 在不同平台下的配置项非常多，不建议手动修改源码，因为 HBuilderX 的可视化配置界面会自动生成正确格式。实际开发中，如果要修改小程序的 AppID，直接在 HBuilderX 的manifest.json可视化页面操作即可。

另外，在切换项目环境或首次运行项目时，如果遇到 manifest.json 相关的编译报错，通常是配置项格式不完整，可以对照官方文档逐项检查。

3.3 Vue 3 组合式 API 基础

Vue 3 的组合式 API 是编写 uniapp 页面的主要方式。下面用一个简单的计数器来演示ref、computed和事件绑定。

<template> <view class="container"> <text class="count">{{ count }}</text> <text class="double">双倍值：{{ doubleCount }}</text> <button type="primary" @click="handleAdd">点我 +1</button> </view> </template> <script setup> import { ref, computed } from 'vue' const count = ref(0) const doubleCount = computed(() => count.value * 2) function handleAdd() { count.value++ } </script> <style scoped> .container { padding: 40rpx; } .count { font-size: 48rpx; display: block; } .double { color: #999; margin: 20rpx 0; } </style>

在 uniapp 中，页面上的标签通常是view、text、button这类小程序组件，而不是div、span。这是 uniapp 和普通 Vue 项目在模板写法上的一个明显差异。

script setup是 Vue 3 的语法糖，组件中引用的变量和函数直接在模板中使用，无需返回。

3.4 常见生命周期差异

uniapp 页面生命周期和 Vue 组件的生命周期有所不同。项目开发中经常会用到onLoad、onShow、onPullDownRefresh等页面级生命周期。

<script setup> import { onLoad, onShow, onPullDownRefresh } from '@dcloudio/uni-app' onLoad((options) => { console.log('页面加载，参数为：', options) }) onShow(() => { console.log('页面显示') }) onPullDownRefresh(() => { console.log('下拉刷新') // 刷新完成后需要调用 uni.stopPullDownRefresh() 结束刷新动画 setTimeout(() => { uni.stopPullDownRefresh() }, 1000) }) </script>

有些新手容易把 Vue 的onMounted当作页面加载完成事件，但实际上在 uniapp 中，页面级参数需要通过onLoad的options参数来接收。

4. 前台应用实战：uniapp + Vue 3 用户端

4.1 请求封装

小程序的网络请求 API 是uni.request，使用方式和浏览器的fetch类似。建议把请求统一封装成一个模块，便于统一处理 BaseURL、Token、错误状态码。

下面创建一个src/utils/request.js文件：

// 文件路径：src/utils/request.js const BASE_URL = 'https://api.example.com' export function request(options) { return new Promise((resolve, reject) => { uni.request({ url: BASE_URL + options.url, method: options.method || 'GET', data: options.data || {}, header: { 'Content-Type': 'application/json', // 如果有登录态，可以带上 token Authorization: uni.getStorageSync('token') || '' }, success: (res) => { if (res.statusCode === 200) { resolve(res.data) } else if (res.statusCode === 401) { uni.showToast({ title: '登录已过期', icon: 'none' }) // 跳转登录页 uni.navigateTo({ url: '/pages/login/login' }) reject(res) } else { uni.showToast({ title: res.data.message || '请求失败', icon: 'none' }) reject(res) } }, fail: (err) => { uni.showToast({ title: '网络异常', icon: 'none' }) reject(err) } }) }) }

这个封装做的事情非常典型：拼接 BaseURL、自动注入 Token、统一处理 200/401/网络异常等场景。实际项目中还可以在此处加入“请求 loading 管理”“接口取消”等高级逻辑，但核心思路是一样的。

4.2 首页功能：轮播图 + 列表

实战项目中，首页通常包含轮播图、宫格导航、推荐列表等模块。这里演示如何调用接口并渲染数据。

<template> <view class="home-page"> <swiper class="banner" indicator-dots autoplay circular> <swiper-item v-for="item in banners" :key="item.id"> <image class="banner-img" :src="item.image" mode="aspectFill" /> </swiper-item> </swiper> <view class="goods-list"> <view class="goods-item" v-for="goods in goodsList" :key="goods.id" @click="goDetail(goods.id)"> <image class="goods-img" :src="goods.cover" mode="aspectFill" /> <view class="goods-name">{{ goods.name }}</view> <view class="goods-price">¥{{ goods.price }}</view> </view> </view> </view> </template> <script setup> import { ref } from 'vue' import { onLoad, onPullDownRefresh } from '@dcloudio/uni-app' import { request } from '@/utils/request' const banners = ref([]) const goodsList = ref([]) onLoad(() => { fetchBanners() fetchGoodsList() }) async function fetchBanners() { const res = await request({ url: '/api/home/banners' }) banners.value = res.data } async function fetchGoodsList() { const res = await request({ url: '/api/home/goods' }) goodsList.value = res.data } function goDetail(id) { uni.navigateTo({ url: `/pages/detail/detail?id=${id}` }) } </script>

在这个示例中，banners和goodsList是响应式数据，通过接口请求赋值后，页面会自动更新。goDetail通过uni.navigateTo跳转到详情页，并把商品 ID 作为参数传递。

注意：这里的接口地址都是示例，实际项目需要替换成自己的后端地址。如果接口文档还没有就绪，可以先让后端提供 Mock 数据，或用 Apifox 等工具生成 Mock 接口。

4.3 列表页：分页加载与下拉刷新

企业级应用几乎都离不开分页列表。uniapp 中常见的做法是：页面上拉触底加载下一页，下拉刷新重置列表。

<template> <view class="list-page"> <view class="list-item" v-for="item in list" :key="item.id" @click="goDetail(item.id)"> <text>{{ item.name }}</text> </view> <view class="load-more">{{ hasMore ? '上拉加载更多' : '没有更多了' }}</view> </view> </template> <script setup> import { ref } from 'vue' import { onLoad, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app' import { request } from '@/utils/request' const list = ref([]) const page = ref(1) const pageSize = 10 const hasMore = ref(true) onLoad(() => { fetchList(true) }) async function fetchList(isRefresh = false) { if (isRefresh) { page.value = 1 hasMore.value = true } if (!hasMore.value) return const res = await request({ url: `/api/list?page=${page.value}&pageSize=${pageSize}` }) const newList = res.data.list if (isRefresh) { list.value = newList } else { list.value = [...list.value, ...newList] } // 如果返回的数据不足一页，说明没有更多了 if (newList.length < pageSize) { hasMore.value = false } page.value++ } onReachBottom(() => { fetchList() }) onPullDownRefresh(async () => { await fetchList(true) uni.stopPullDownRefresh() }) function goDetail(id) { uni.navigateTo({ url: `/pages/detail/detail?id=${id}` }) } </script>

分页的参数命名、是否返回total等，都需要以接口文档为准。上面的示例提供了通用的分页思路。

4.4 详情页：接收参数并加载数据

详情页的关键点是从onLoad的options中取出路由参数，然后请求详情接口。

<template> <view class="detail-page"> <image class="detail-img" :src="detailData.cover" mode="aspectFill" /> <view class="detail-title">{{ detailData.name }}</view> <view class="detail-price">¥{{ detailData.price }}</view> <rich-text :nodes="detailData.content"></rich-text> </view> </template> <script setup> import { ref } from 'vue' import { onLoad } from '@dcloudio/uni-app' import { request } from '@/utils/request' const detailId = ref('') const detailData = ref({}) onLoad((options) => { detailId.value = options.id fetchDetail() }) async function fetchDetail() { const res = await request({ url: `/api/detail?id=${detailId.value}` }) detailData.value = res.data } </script>

rich-text组件可以解析 HTML 字符串，适合展示富文本详情内容。

5. 后台管理系统实战：Vue 3 + Element Plus

5.1 项目初始化与路由配置

后台管理系统的技术栈通常是：Vue 3 + Vite + Vue Router 4 + Pinia + Element Plus。这里以 Vite 创建的项目为基础。

安装 Element Plus：

npm install element-plus

如果需要按需引入，可以配合unplugin-vue-components和unplugin-auto-import插件。为了简化演示，下面使用完整引入方式。

// 文件路径：src/main.js import { createApp } from 'vue' import { createPinia } from 'pinia' import ElementPlus from 'element-plus' import 'element-plus/dist/index.css' import App from './App.vue' import router from './router' const app = createApp(App) app.use(createPinia()) app.use(router) app.use(ElementPlus) app.mount('#app')

路由配置示例：

// 文件路径：src/router/index.js import { createRouter, createWebHistory } from 'vue-router' const router = createRouter({ history: createWebHistory(), routes: [ { path: '/login', name: 'Login', component: () => import('@/views/Login.vue'), meta: { title: '登录' } }, { path: '/', component: () => import('@/layout/Index.vue'), redirect: '/dashboard', children: [ { path: 'dashboard', name: 'Dashboard', component: () => import('@/views/Dashboard.vue'), meta: { title: '工作台' } }, { path: 'goods', name: 'GoodsList', component: () => import('@/views/goods/List.vue'), meta: { title: '商品列表' } } ] } ] }) export default router

登录页和 Layout 是后台管理系统的核心结构。开发中，meta.title通常用于动态设置浏览器标签页标题和侧边栏菜单名称。

5.2 登录认证与 Token 管理

后台管理系统最常见的需求是登录认证。登录成功后，后端返回 Token，前端保存到 Pinia 中，并在请求拦截器里自动携带 Token。

创建一个 Pinia store：

// 文件路径：src/store/user.js import { defineStore } from 'pinia' import { ref } from 'vue' export const useUserStore = defineStore('user', () => { const token = ref(localStorage.getItem('token') || '') const userInfo = ref(null) function setToken(value) { token.value = value localStorage.setItem('token', value) } function setUserInfo(value) { userInfo.value = value } function logout() { token.value = '' userInfo.value = null localStorage.removeItem('token') } return { token, userInfo, setToken, setUserInfo, logout } })

接着封装一个带请求拦截的 axios 实例。由于后台管理系统运行在浏览器中，可以用 axios 来处理请求。

// 文件路径：src/utils/request.js import axios from 'axios' import { ElMessage } from 'element-plus' import { useUserStore } from '@/store/user' import router from '@/router' const service = axios.create({ baseURL: import.meta.env.VITE_API_BASE_URL || '/api', timeout: 10000 }) // 请求拦截器：自动携带 Token service.interceptors.request.use((config) => { const userStore = useUserStore() if (userStore.token) { config.headers.Authorization = `Bearer ${userStore.token}` } return config }) // 响应拦截器：统一处理错误 service.interceptors.response.use( (response) => { const res = response.data if (res.code !== 0) { ElMessage.error(res.message || '请求失败') return Promise.reject(new Error(res.message)) } return res }, (error) => { if (error.response && error.response.status === 401) { const userStore = useUserStore() userStore.logout() router.push('/login') ElMessage.error('登录已过期，请重新登录') } else { ElMessage.error(error.message || '网络错误') } return Promise.reject(error) } ) export default service

这里需要注意：不同团队的接口返回结构不同，有的是{ code: 0, data: xxx, message: 'xxx' }，有的是 HTTP 状态码加{ data }。具体以接口文档为准。

5.3 商品管理页面

商品管理是后台管理系统的典型页面，包含表格、搜索、分页、弹窗表单等。下面用 Element Plus 实现一个简化版本。

<!-- 文件路径：src/views/goods/List.vue --> <template> <div class="goods-page"> <el-card shadow="never"> <el-form inline> <el-form-item label="商品名称"> <el-input v-model="query.keyword" placeholder="请输入商品名称" clearable /> </el-form-item> <el-form-item> <el-button type="primary" @click="fetchList">查询</el-button> <el-button type="success" @click="openDialog()">新增商品</el-button> </el-form-item> </el-form> <el-table :data="tableData" border stripe> <el-table-column prop="id" label="ID" width="80" /> <el-table-column prop="name" label="商品名称" /> <el-table-column prop="price" label="价格" width="120" /> <el-table-column label="状态" width="100"> <template #default="{ row }"> <el-tag :type="row.status === 1 ? 'success' : 'info'"> {{ row.status === 1 ? '上架' : '下架' }} </el-tag> </template> </el-table-column> <el-table-column label="操作" width="160"> <template #default="{ row }"> <el-button link type="primary" @click="openDialog(row)">编辑</el-button> <el-button link type="danger" @click="handleDelete(row)">删除</el-button> </template> </el-table-column> </el-table> <el-pagination v-model:current-page="query.page" v-model:page-size="query.pageSize" :total="total" layout="total, prev, pager, next" @current-change="fetchList" /> </el-card> <el-dialog v-model="dialogVisible" :title="form.id ? '编辑商品' : '新增商品'" width="500px"> <el-form :model="form" label-width="80px"> <el-form-item label="商品名称"> <el-input v-model="form.name" /> </el-form-item> <el-form-item label="价格"> <el-input-number v-model="form.price" :min="0" :precision="2" /> </el-form-item> <el-form-item label="状态"> <el-switch v-model="form.status" :active-value="1" :inactive-value="0" /> </el-form-item> </el-form> <template #footer> <el-button @click="dialogVisible = false">取消</el-button> <el-button type="primary" @click="handleSubmit">确定</el-button> </template> </el-dialog> </div> </template> <script setup> import { ref, reactive } from 'vue' import { ElMessage, ElMessageBox } from 'element-plus' import request from '@/utils/request' const tableData = ref([]) const total = ref(0) const dialogVisible = ref(false) const query = reactive({ keyword: '', page: 1, pageSize: 10 }) const form = reactive({ id: null, name: '', price: 0, status: 0 }) async function fetchList() { const res = await request.get('/goods', { params: query }) tableData.value = res.data.list total.value = res.data.total } function openDialog(row) { if (row) { Object.assign(form, row) } else { Object.assign(form, { id: null, name: '', price: 0, status: 0 }) } dialogVisible.value = true } async function handleSubmit() { if (form.id) { await request.put(`/goods/${form.id}`, form) } else { await request.post('/goods', form) } ElMessage.success('保存成功') dialogVisible.value = false fetchList() } async function handleDelete(row) { await ElMessageBox.confirm('确定删除该商品吗？', '提示', { type: 'warning' }) await request.delete(`/goods/${row.id}`) ElMessage.success('删除成功') fetchList() } fetchList() </script>

这样一个后台管理系统的基础功能就成型了：搜索分页、弹窗新增、编辑、删除。实际项目中，还需要补充权限控制、表单校验、加载状态等细节。

6. 接口文档管理与前后端联调

6.1 接口文档应包含哪些内容

一份完整的接口文档，至少要包含以下信息：

比如商品列表接口：

• 地址：GET /api/goods
• 请求参数：keyword（可选，搜索关键词）、page（页码，默认 1）、pageSize（每页条数，默认 10）
• 返回示例：

{ "code": 0, "message": "success", "data": { "list": [ { "id": 1, "name": "测试商品", "price": 99.9, "status": 1 } ], "total": 100 } }

6.2 使用 Swagger 自动生成接口文档

Swagger 是后端开发中最常见的接口文档方案。后端只需要在控制器方法上添加注解，启动服务后就可以通过/swagger-ui.html或/doc.html查看完整的接口列表。

作为前端开发人员，你需要关注的重点是：

• 请求路径是否正确。
• 参数名和类型是否和页面中的变量一致。
• 返回结构中的字段名称是什么。
• 错误码的含义是什么。

在前后端并行开发时，如果后端接口还没写好，可以用接口管理工具先定义好数据结构，生成 Mock 接口，前端先行调用 Mock 数据进行页面开发。

6.3 通过 Apifox 进行接口联调

Apifox 这类工具其实是在 Postman + Swagger 的基础上，增加了“导出/导入文档”和“Mock 服务”能力。它的典型使用方式是：

1. 后端在 Apifox 中定义接口，或者通过 Swagger 导入接口。
2. 前端在 Apifox 中查看接口详情，生成前端调用代码。
3. 后端接口未完成时，前端使用 Mock 数据开发。
4. 联调阶段，直接切换环境为真实地址。

这种“接口文档驱动”的开发模式，能有效减少无效沟通和联调返工。

7. 常见问题与排查思路

7.1 uniapp 常见问题

7.2 后台管理系统常见问题

7.3 uniapp 打包问题

uniapp 打包小程序，需要在 HBuilderX 中点击发行 -> 小程序-微信，填写小程序 AppID。如果打包报错，先检查 manifest.json 中的微信小程序配置是否正确。

uniapp 打包 App，则需要在发行 -> 原生App-云打包中选择打包方式。首次打包需要登录 DCloud 账号，并且需要配置 Android 包名和证书信息。本地打包则还需要下载对应的 SDK 版本，且 SDK 版本需要与 HBuilderX 版本匹配，这个在热词中也被反复提及，项目落地时一定要留意版本对应关系。

7.4 通用排查步骤

遇到报错时，建议按下面的顺序排查：

1. 先看控制台报错信息，定位是编译错误还是运行错误。
2. 再看网络请求，确认接口是否返回预期数据。
3. 检查参数命名，特别是接口文档中的字段名和小写驼峰差异。
4. 检查环境配置，开发环境、测试环境、生产环境的 BaseURL 是否正确。
5. 最后检查打包配置，小程序和 App 的域名、证书、SDK 版本。

8. 最佳实践与工程建议

8.1 目录规范与命名

前台 uniapp 项目建议按业务模块组织页面：

src/pages/ ├── home/ ├── goods/ ├── order/ └── mine/

后台管理系统建议按功能模块组织视图：

src/views/ ├── dashboard/ ├── goods/ ├── order/ └── system/

变量命名统一使用小驼峰，文件名使用短横线分隔。接口地址统一维护在api模块中，不要在组件中直接拼接 URL。

8.2 接口文档与 Mock 先行

在企业级开发中，接口文档一定要提前定义，前端和后端按同一份文档并行开发。前端在接口未就绪时，优先使用 Mock 数据验证页面逻辑。

建议每个前端请求函数都集中维护，例如在 uniapp 项目中写一个src/api/goods.js：

import { request } from '@/utils/request' export function getGoodsList(data) { return request({ url: '/api/goods', method: 'GET', data }) } export function getGoodsDetail(id) { return request({ url: `/api/goods/${id}`, method: 'GET' }) }

这样当接口路径或参数发生变化时，只需要改动一个文件，所有页面自动生效。

8.3 状态管理与权限控制

前台应用的状态管理，建议只在确有跨页面共享的数据时使用 Pinia，比如用户登录态、购物车数量。不要把接口数据全部塞进 Store，否则会导致状态管理混乱。

后台管理系统的权限控制，则要区分“路由权限”和“按钮权限”。路由权限通过路由守卫实现，按钮权限通过自定义指令或v-if判断。生产环境中，前端权限只是体验优化，真正的数据安全必须依赖后端接口权限校验。

8.4 安全与生产环境注意事项

前后台所有请求必须走 HTTPS，登录接口必须考虑接口限流。涉及删除、批量处理等敏感操作时，后台管理端要二次确认；生产环境变更必须走测试环境验证 + 备份 + 审计流程。这里要强调的是，前端中的权限控制和 Token 存储只是基础，任何面向用户的系统都必须把安全边界放在后端。

8.5 工程化建设

工程化是团队协作的基础。建议项目从搭建初期就引入：

• ESLint 统一代码风格，避免不同成员的缩进、引号风格引发代码冲突。
• Git Flow 规范分支命名，比如feature/xxx、fix/xxx。
• 环境变量区分开发、测试、生产环境，不要在代码中写死接口地址。
• 提交代码前检查是否有敏感信息，例如密钥、Token、密码。

9. 总结

到目前为止，我们已经完成了一条完整的学习链路：从了解 uniapp + Vue 3 的背景，到搭建前台应用和后台管理系统，再到通过接口文档实现前后端联调，最后整理了常见问题与工程化建议。

所谓“企业级实战”，核心其实不在单一技术点，而在于：工程结构是否清晰、接口契约是否明确、错误处理是否统一、权限边界是否清楚、发布流程是否规范。uniapp 负责跨端，Vue 3 负责交互，后台管理系统负责运营，接口文档负责协同，四者配合起来才是一个能真正上线的项目。

下一步，可以继续深入学习 uniapp 的条件编译与原生插件调用、Vue 3 的组件封装与单元测试、后台管理系统的动态路由与权限设计等内容。另外，实际项目中对接口文档的维护一定要重视，任何接口变更都需要及时同步到文档中。

如果你正在从 Vue 2 迁移到 Vue 3，或者准备从零搭建一套 uniapp + 后台管理系统，建议先按照本文的步骤把最小可运行的项目跑通，再逐步把业务代码填充进去。动手实践是学习这套技术栈最快的方式。