供应链系统页面原型搭建实战：Vue3+Vite+Element Plus

简介：供应链系统页面原型是一套面向业务人员、开发人员和设计师的HTML可视化工具包，聚焦供应链管理从采购、库存、生产计划到物流配送、销售财务及报表分析的核心流程，帮助各方在开发前对齐界面布局与交互设计。压缩包内含299个文件，以87个HTML页面原型为主体，辅以126个GIF交互演示、57张PNG/JPG界面素材、CSS/JS样式脚本以及Excel表格，整体仅约661KB，体量轻巧便于反复查看。上线以来已有1174人学习下载。原型覆盖供应商管理、采购订单、库存预警、生产调度、物流追踪、销售分销、财务对账等典型业务场景，通过逐页浏览可以掌握各模块的字段结构、导航逻辑和操作反馈，GIF示例则直观呈现关键交互细节，非常适合作为产品需求评审、界面走查以及系统开发的参考蓝本，对产品经理、交互设计师和供应链项目实施人员都能快速建立全局认知。

1. 供应链系统页面原型：为什么线框图总在评审会上翻车

需求评审会上，业务方看着十来张线框图，点点头说“差不多就这样”，等开发把页面搭出来，业务方反悔了：这个按钮应该在右上角，那个状态为什么没有颜色区分，采购订单的审批流根本没接上。供应链系统的页面原型，从来不是多画几页静态图那么简单。它要解决的是“业务方看不到页面长什么样、开发拿不到可对照的界面、跨部门协作全靠脑补”这三件事。一套能点开、能筛选、能提交假数据、能演示完整流程的页面原型，才是在开工之前消除理解偏差、让评审和开发都能直接上手的东西。这篇笔记把我自己做供应链系统页面原型的完整套路拆开讲，新手照着做能跑通，老手重点看边界和踩坑。

2. 选型先于画框：页面原型的取舍与技术栈定位

2.1 低代码平台与前端工程化，原型该站在哪一边

供应链系统的页面原型，业内常见有两条路：一是用低代码或在线原型工具拖拽，二是用前端工程化方式直接写一个可运行的 Demo。低代码工具上手快，一个下午能拉出几十页带交互的图，但它有个绕不过去的坎——原型里的东西不能直接交付给开发。组件是平台私有属性，样式平台生成，数据靠工具内置的模拟器，进入真实开发时几乎全部推翻重来。前端工程化方式恰恰相反，页面结构、路由、状态管理和UI组件全部是真实代码，原型阶段写的表格、表单和交互逻辑，开发期可以沿用一大部分，顶多替换数据源。

我做这类页面原型，默认选第二种。倒不是因为低代码工具不好，而是供应链系统有个非常实际的特点：页面之间的流转关系比单页美观更重要。采购订单从创建到审批再到入库，库存看板要联动采购和销售数据，供应商资质审核牵扯多角色状态。这种系统用可点击的真页面演示，比线框图直观得多，也比低代码工具生成的链接更贴近最终系统。

2.2 一张表定技术栈：Vite、Vue、UI库与Mock数据的分工

页面原型的技术栈选择，原则只有一个：开发期轻量、演示期稳定、交接期能复用。我常用的组合是 Vite + Vue 3 + 组件库 + Vue Router + Pinia + Mock 数据层，每部分分工如下。

这套组合的取舍点在于：不引入重型图表库、不引入复杂权限框架、不引入代码生成器。页面原型阶段最怕“用起来像正式项目”，图表用简单的 CSS 比例条或轻量组件顶住，权限用一个 role 字段控制路由显隐，够演示就行。真正的前后端联调、复杂权限和图表性能优化，是进入开发期之后的事，不在页面原型阶段消耗时间。

2.3 目录结构设计：让原型长成可演进的骨架

页面原型最容易烂的不是页面，是目录。一开始图省事，所有页面堆在 views 下面，路由集中在一个文件里，Mock 数据写在组件内部。等加到十几页、要做演示时，改一个状态要翻三个文件。我一般会按下面的结构组织，前端开发接手时也能看懂。

supply-chain-prototype/ ├── src/ │ ├── api/ # 接口定义，每个模块一个文件 │ │ ├── purchase.js │ │ ├── inventory.js │ │ └── supplier.js │ ├── assets/ # 静态资源 │ ├── components/ # 公共组件，如状态标签、分页封装 │ ├── layouts/ # 主布局，侧边栏+顶栏+内容区 │ ├── mock/ # Mock数据，按模块分文件 │ │ ├── purchase.js │ │ └── inventory.js │ ├── router/ # 路由配置，与菜单联动 │ ├── stores/ # Pinia状态 │ ├── views/ # 页面 │ │ ├── purchase/ # 采购订单列表、详情 │ │ ├── inventory/ # 库存看板、入库单 │ │ └── supplier/ # 供应商列表、注册 │ ├── App.vue │ └── main.js ├── vite.config.js └── package.json

关键设计有两个：一是 api 目录和 mock 目录一一对应，页面里不直接碰 Mock 数据，统一走接口调用。这样后面切换真实后端时，只改 api 文件里的 baseURL，页面代码一行不动。二是路由和菜单由同一份配置生成，侧边栏加了一个菜单项，路由也就有了，不会出现菜单有项、页面点进去 404 的情况。

3. 搭建最小可运行的页面原型骨架：三步命令与路由配置

3.1 初始化工程与依赖安装：最小命令长这样

页面原型的第一版骨架，我一般半个小时搭完，核心就三条命令。

# 1. 创建 Vue3 + Vite 工程，模板选 vue npm create vite@latest supply-chain-prototype -- --template vue # 2. 进入项目并安装基础依赖 cd supply-chain-prototype npm install # 3. 安装供应链页面原型需要的依赖 npm install element-plus vue-router pinia axios npm install -D vite-plugin-mock mockjs

第一条命令用 Vite 官方脚手架创建工程，--template vue 指定 Vue 单页应用模板，供应链系统页面的原型不需要 SSR 也不需要多页配置，最简模板够用。第二条安装基础依赖。第三条装了七样东西：Element Plus 负责表格和表单组件，vue-router 管页面跳转，pinia 存登录和角色状态，axios 发请求，vite-plugin-mock 和 mockjs 配合做接口拦截。

安装完依赖，本地启动验证一下环境可用。npm run dev 能起服务，说明骨架没问题。这里要提醒一句：组件库的完整引入和按需引入，页面原型阶段我建议先完整引入。按需引入要额外配 unplugin-vue-components 和 unplugin-auto-import，原型阶段省事第一，完整引入造成的打包体积变大不在当前考虑范围内，等进入开发期再优化也不迟。

3.2 路由与布局：把供应链菜单变成可点击的壳

页面原型的布局要贴近真实系统，侧边栏放采购管理、库存管理、供应商管理三大模块，顶栏显示当前用户和退出入口。路由配置我按模块拆文件，再从 index.js 汇总。

// src/router/index.js import { createRouter, createWebHashHistory } from 'vue-router' import MainLayout from '@/layouts/MainLayout.vue' // 原型阶段用 hash 路由，刷新页面不会 404，部署到任意静态服务器都稳 const routes = [ { path: '/', component: MainLayout, redirect: '/purchase/list', children: [ { path: 'purchase/list', name: 'PurchaseList', component: () => import('@/views/purchase/PurchaseList.vue'), meta: { title: '采购订单' } }, { path: 'inventory/dashboard', name: 'InventoryDashboard', component: () => import('@/views/inventory/InventoryDashboard.vue'), meta: { title: '库存看板' } }, { path: 'supplier/list', name: 'SupplierList', component: () => import('@/views/supplier/SupplierList.vue'), meta: { title: '供应商管理' } } ] } ] const router = createRouter({ history: createWebHashHistory(), routes }) export default router

这段路由配置的核心是用 createWebHashHistory 而不是 createWebHistory。供应链页面原型常在本地和演示环境来回跑，hash 路由不需要服务器配置重写规则，双击 HTML 文件都能打开一部分功能，演示时省去一堆环境问题。路由懒加载用动态 import，避免一次加载所有页面导致首屏慢。

主布局的侧边栏菜单对应路由表，Element Plus 的 el-menu 直接绑定 router 模式，菜单项的 index 就是路由路径。Layout 组件里只需要一个菜单配置数组，从路由表里读出有 meta.title 的项渲染，这样新增页面时只改路由配置，菜单自动长出来。

3.3 Mock数据先行：在写页面之前先把接口假起来

页面原型的体验好坏，很大程度上取决于数据能不能动起来。静态写死在页面的数据，演示时无法体现筛选、分页、状态流转。我习惯在动手写页面之前，先把 Mock 接口配好，页面代码从一开始就走真实的异步请求链路。

// vite.config.js import { viteMockServe } from 'vite-plugin-mock' export default defineConfig({ plugins: [ vue(), viteMockServe({ mockPath: './src/mock', localEnabled: true, // 本地开发开启 mock prodEnabled: true, // 打包预览时也开启，方便演示 injectCode: ``, // 不需要注入额外代码 supportTs: false // 用 JS 写 mock，不用 TS }) ] })

// src/mock/purchase.js import { MockMethod } from 'vite-plugin-mock' export default [ { url: '/api/purchase/list', method: 'get', response: ({ query }) => { // 模拟分页数据，订单号、供应商、状态都是供应链场景里的常见字段 const list = [] const statusMap = ['待审批', '已审批', '已入库', '已取消'] for (let i = 0; i < 50; i++) { list.push({ id: i + 1, orderNo: 'PO202406' + String(1000 + i), supplierName: '供应商' + (i % 8), amount: 1000 + i * 137, status: statusMap[i % 4], createTime: `2024-06-${String(1 + (i % 28)).padStart(2, '0')}` }) } return { code: 0, data: { total: 50, list: list.slice((query.page - 1) * query.pageSize, query.page * query.pageSize) } } } } ]

Mock 配置里有三个参数值得注意。mockPath 指定 mock 文件目录，按模块拆文件后方便维护。localEnabled 和 prodEnabled 都打开，这样本地开发和打包演示时接口都能通。页面原型最怕的就是演示时接口 404，直接截一张空页面，prodEnabled 打开能避免这个尴尬。mock 接口的 response 函数里，通过 query 拿到页面传来的 page 和 pageSize，做真正的分页切片，不是把所有数据一股脑返回，这样前端分页组件的表现和真实系统一致。

4. 三个核心页面原型落地：采购订单、库存看板、供应商管理

4.1 采购订单列表：表格、筛选、分页，原型里怎么处理

采购订单列表是供应链系统的门面页，也是页面原型里最该做细的一页。业务方评审时主要盯三个点：字段全不全、状态有没有颜色区分、筛选能不能用。我按这三个点来写。

<!-- src/views/purchase/PurchaseList.vue --> <template> <div class="purchase-list"> <!-- 筛选区：订单号、供应商、状态，三个条件对应真实业务查询需求 --> <el-form :inline="true" :model="queryForm"> <el-form-item label="订单号"> <el-input v-model="queryForm.orderNo" placeholder="输入订单号" clearable /> </el-form-item> <el-form-item label="供应商"> <el-input v-model="queryForm.supplierName" placeholder="输入供应商名称" clearable /> </el-form-item> <el-form-item label="状态"> <el-select v-model="queryForm.status" placeholder="全部" clearable> <el-option label="待审批" value="待审批" /> <el-option label="已审批" value="已审批" /> <el-option label="已入库" value="已入库" /> </el-select> </el-form-item> <el-form-item> <el-button type="primary" @click="loadData">查询</el-button> <el-button @click="resetQuery">重置</el-button> </el-form-item> </el-form> <!-- 表格区：列字段对齐业务表，状态列用标签组件 --> <el-table :data="tableData" v-loading="loading" border> <el-table-column prop="orderNo" label="订单号" width="160" /> <el-table-column prop="supplierName" label="供应商" min-width="140" /> <el-table-column prop="amount" label="金额(元)" width="120" align="right" /> <el-table-column label="状态" width="100"> <template #default="{ row }"> <el-tag :type="statusType(row.status)">{{ row.status }}</el-tag> </template> </el-table-column> <el-table-column prop="createTime" label="创建日期" width="120" /> <el-table-column label="操作" width="150"> <template #default="{ row }"> <el-button link type="primary" @click="openDetail(row)">详情</el-button> <el-button link type="warning" @click="openApprove(row)" v-if="row.status === '待审批'"> 审批 </el-button> </template> </el-table-column> </el-table> <!-- 分页区：page-size 用 10，供应链列表常见的首屏密度 --> <el-pagination v-model:current-page="queryForm.page" v-model:page-size="queryForm.pageSize" :total="total" :page-sizes="[10, 20, 50]" layout="total, sizes, prev, pager, next" @change="loadData" /> </div> </template> <script setup> import { ref, reactive, onMounted } from 'vue' import { getPurchaseList } from '@/api/purchase' const tableData = ref([]) const total = ref(0) const loading = ref(false) const queryForm = reactive({ orderNo: '', supplierName: '', status: '', page: 1, pageSize: 10 }) // 状态映射：不同状态用不同颜色，评审时的视觉焦点 const statusType = (status) => { const map = { '待审批': 'warning', '已审批': 'success', '已入库': 'primary', '已取消': 'info' } return map[status] || 'info' } const loadData = async () => { loading.value = true try { const res = await getPurchaseList(queryForm) tableData.value = res.data.list total.value = res.data.total } finally { loading.value = false } } const resetQuery = () => { queryForm.orderNo = '' queryForm.supplierName = '' queryForm.status = '' queryForm.page = 1 loadData() } const openDetail = (row) => { // 原型阶段用弹窗展示详情，不进详情页，减少页面数量 ElMessageBox.alert( `订单${row.orderNo}的详情在这里演示`, '采购订单详情', { confirmButtonText: '知道了' } ) } const openApprove = (row) => { ElMessageBox.confirm(`确认审批通过订单 ${row.orderNo} ?`, '审批确认', { confirmButtonText: '通过', cancelButtonText: '驳回' }).then(() => { ElMessage.success('已通过（原型演示）') }) } onMounted(loadData) </script>

这段代码的选型逻辑是：筛选区和表格区分离，表单是内联模式，三个筛选条件覆盖了采购订单最经常被问到的口径。状态列用 el-tag 加映射类型，待审批黄色、已审批绿色、已入库蓝色，这是评审时业务方最容易提意见的地方，颜色语义必须提前定义好。操作列里“审批”按钮用 v-if 控制只出现在待审批行，演示时点一下就能展示业务方最关心的审批动作。分页组件的 page-sizes 给了 10、20、50 三档，配合 Mock 接口的切片逻辑，切换分页大小不会出现空页。

筛选参数里 orderNo 和 supplierName 用的是模糊匹配，Mock 接口里没做精确过滤，这里留了个明显的简化点：真实系统里订单号是精确匹配、供应商是下拉选择带搜索，页面原型演示阶段用输入框应付够了，但要在代码注释里标出来，不然开发期照着原型做会把模糊匹配抄进去。

4.2 库存看板：卡片、图表与状态色，数据怎么驱动

库存看板页在供应链原型里承担“总览”职责。采购、销售、库存周转这几块数据要一屏看完。原型阶段我不引入 ECharts，用 CSS 比例条和统计卡片实现，效果不差，加载还快。

<!-- src/views/inventory/InventoryDashboard.vue --> <template> <div class="inventory-dashboard"> <el-row :gutter="16"> <el-col :span="6" v-for="card in summaryCards" :key="card.label"> <el-card shadow="hover"> <div class="summary-card"> <div class="summary-label">{{ card.label }}</div> <div class="summary-value" :style="{ color: card.color }">{{ card.value }}</div> <div class="summary-extra">{{ card.extra }}</div> </div> </el-card> </el-col> </el-row> <el-row :gutter="16" class="mt-16"> <el-col :span="12"> <el-card shadow="never"> <template #header>近7日入库/出库对比</template> <div v-for="item in trendData" :key="item.date" class="trend-row"> <span class="trend-date">{{ item.date }}</span> <div class="trend-bar-wrap"> <div class="trend-bar trend-bar-in" :style="{ width: item.inPercent + '%' }"> 入 {{ item.inCount }} </div> </div> <div class="trend-bar-wrap"> <div class="trend-bar trend-bar-out" :style="{ width: item.outPercent + '%' }"> 出 {{ item.outCount }} </div> </div> </div> </el-card> </el-col> <el-col :span="12"> <el-card shadow="never"> <template #header>库存预警</template> <el-table :data="warningList" size="small"> <el-table-column prop="sku" label="SKU" /> <el-table-column prop="name" label="商品名称" /> <el-table-column prop="stock" label="当前库存" width="90" align="right" /> <el-table-column label="状态" width="90"> <template #default="{ row }"> <el-tag v-if="row.stock < row.safetyStock" type="danger">低于安全库存</el-tag> <el-tag v-else type="warning">临期</el-tag> </template> </el-table-column> </el-table> </el-card> </el-col> </el-row> </div> </template>

库存预警这里有个原型阶段容易忽略的东西：安全库存字段。我在列表数据里给每行都造了 safetyStock 字段，低于它的标红色“低于安全库存”，临期标黄色“临期”。业务方看到颜色会立刻知道这个字段是干什么的，评审效率能提不少。比例条直接拿 data 里的值除以最大值算出百分比，写在 style 的 width 上，完全不需要图表库。

这套看板的数据都是从 Mock 接口一次性返回，前后端分离的思想在这里体现得很明确。页面组件只消费数据，不关心数据从哪来。后面要接真实接口，只要保证返回字段名一致，页面可以原封不动。

4.3 供应商注册表单：校验、省市级联与提交假接口

供应商管理页面里，注册表单是交互复杂度最高的一块。省市级联、统一社会信用代码校验、多类型资质上传，这三个在真实系统里都是高频功能，页面原型里至少要做出前两个，资质上传用 Mock 接口模拟一下。

<!-- src/views/supplier/SupplierRegister.vue --> <template> <el-card shadow="never" class="register-card"> <template #header>新增供应商</template> <el-form ref="formRef" :model="form" :rules="rules" label-width="120px"> <el-form-item label="供应商名称" prop="name"> <el-input v-model="form.name" placeholder="输入企业全称" /> </el-form-item> <el-form-item label="统一社会信用代码" prop="creditCode"> <el-input v-model="form.creditCode" placeholder="18位代码" maxlength="18" /> </el-form-item> <el-form-item label="所在地区" prop="region"> <el-cascader v-model="form.region" :options="regionOptions" placeholder="选择省/市/区" style="width: 100%" /> </el-form-item> <el-form-item label="供应品类" prop="category"> <el-select v-model="form.category" placeholder="选择主供应品类" style="width: 100%"> <el-option label="电子元器件" value="电子元器件" /> <el-option label="金属材料" value="金属材料" /> <el-option label="包装耗材" value="包装耗材" /> </el-select> </el-form-item> <el-form-item label="联系人" prop="contactName"> <el-input v-model="form.contactName" /> </el-form-item> <el-form-item label="联系电话" prop="contactPhone"> <el-input v-model="form.contactPhone" maxlength="11" /> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm">提交</el-button> <el-button @click="resetForm">重置</el-button> </el-form-item> </el-form> </el-card> </template> <script setup> import { reactive, ref } from 'vue' import { ElMessage } from 'element-plus' import { registerSupplier } from '@/api/supplier' const formRef = ref(null) const form = reactive({ name: '', creditCode: '', region: [], category: '', contactName: '', contactPhone: '' }) // 省市级联数据，原型里用精简版，演示效果足够 const regionOptions = [ { value: '广东省', label: '广东省', children: [ { value: '深圳市', label: '深圳市', children: [ { value: '南山区', label: '南山区' }, { value: '宝安区', label: '宝安区' } ] }, { value: '广州市', label: '广州市', children: [ { value: '天河区', label: '天河区' }, { value: '白云区', label: '白云区' } ] } ] } ] const rules = { name: [{ required: true, message: '请输入供应商名称', trigger: 'blur' }], creditCode: [ { required: true, message: '请输入统一社会信用代码', trigger: 'blur' }, { min: 18, max: 18, message: '信用代码需为18位', trigger: 'blur' } ], region: [{ required: true, type: 'array', message: '请选择所在地区', trigger: 'change' }], category: [{ required: true, message: '请选择供应品类', trigger: 'change' }], contactName: [{ required: true, message: '请输入联系人', trigger: 'blur' }], contactPhone: [ { required: true, message: '请输入联系电话', trigger: 'blur' }, { pattern: /^1\d{10}$/, message: '手机号格式不正确', trigger: 'blur' } ] } const submitForm = () => { formRef.value.validate(async (valid) => { if (!valid) return const res = await registerSupplier({ ...form, region: form.region.join('/') }) if (res.code === 0) { ElMessage.success('提交成功，供应商已进入待审核状态') formRef.value.resetFields() } }) } const resetForm = () => { formRef.value.resetFields() } </script>

表单校验规则参考了真实场景：统一社会信用代码固定 18 位，手机号走 1 开头的 11 位正则，地区用级联选择并做必填。这些规则在页面原型阶段不需要特别严格，但必须有，因为评审时业务方会现场乱填，盯的就是“乱填时系统有什么反应”。校验规则能立刻拦住错误输入，比做十页精美的静态图更能说明系统成熟度。

提交动作走到 registerSupplier 接口，Mock 那边返回 code 0 表示成功，页面给出提示并清空表单。这里有个细节：region 数组在提交时用 join 拼成字符串“广东省/深圳市/南山区”，Mock 接口和后续开发接口对接时，传输格式就统一成字符串了，不会出现前后端字段格式不一致的争议。

5. 供应链页面原型的5个实测避坑点：从跨域到演示环境

5.1 Mock接口在演示时全部404，页面白茫茫一片

现象：本地开发一切正常，npm run build 打包后部署到测试服务器，打开页面所有表格都是空的，控制台一片 404。原因：vite-plugin-mock 默认只在开发服务器生效，打包后的静态文件不会自动带上 Mock 功能。解决：vite.config.js 里把 prodEnabled 打开，并在打包时引入 mock 数据。很多同事第一次用这个插件都会踩，以为 localEnabled 打开就够了。我一般在配置完第一时间验证一次 build 产物，不在演示当天才发现。

5.2 按需引入组件库导致样式错乱

现象：把 Element Plus 改成自动按需引入后，表格倒是能显示，弹窗和消息提示全没有样式，按钮也缺了边角。原因：按需引入需要同时配置 unplugin-vue-components 和 unplugin-auto-import，而且 ElMessage 这种函数式组件不会自动引入样式，需要单独处理。解决：页面原型阶段别做按需引入，直接在 main.js 里全量引入 Element Plus。全量引入的包体大约多 200 多 KB，但换来的是一次都不用排查组件样式问题。等开发期再优化。

5.3 路由用 createWebHistory，刷新之后404

现象：本地演示时在 采购订单 页面按 F5 刷新，页面直接 404。原因：createWebHistory 依赖服务器支持 history 回退，开发服务器有兜底，静态文件服务器没有。解决：原型阶段统一用 createWebHashHistory，URL 里多个 #，虽然不那么好看，但刷新稳定。这个选择从做原型第一天就不要两个来回换，不然页面里写死的跳转路径全要跟着改。

5.4 演示临时想改数据，要改代码重新打包

现象：业务方在看库存看板时问“这个预警数量能不能改成 20”，原型里写死的数据改起来要重新 build，演示现场非常尴尬。原因：数据没有集中在 Mock 层管理，有的字段直接写在组件里。解决：所有页面数据从接口拿，写死在组件里的字段也尽量抽到 Mock 里。演示时要调数字，直接改 mock 文件里的数据，热更新或重新打包都很快。临场改数据这种事迟早遇到，数据集中管理能救急。

5.5 评审时被页面里的假按钮带偏节奏

现象：原型里做了一个“打印出货单”按钮，功能没实现，但业务方看到按钮就追问打印格式、模板、套打规则，评审方向被带偏。原因：原型里放了太多超出本次评审范围的入口。解决：页面原型只放本次要评审和确认的元素，其他入口要么删除，要么做成禁用态并加“原型暂未包含”的 tooltip。演示前自己点一遍，把每个能点的按钮对应到一个能讲的脚本，点不动的入口全部关掉。

6. 把页面原型变成可验收的Demo：权限模拟、数据协同与打包部署

原型做到只看页面已经没问题，接下来要让它在演示环境里能演完一整个故事。我一般补三块：权限模拟、数据协同、打包部署。

权限模拟用 Pinia 存一个当前用户对象，里面带 role 字段，路由守卫根据 role 判断菜单显隐。常见做法是 menu 配置里给每个菜单挂 roles 数组，例如“供应商注册”“库存预警配置”这类管理功能只让 admin 角色看到。演示时登录页提供两个账号入口，一键切换看效果。

数据协同这一块最能体现原型诚意。供应商注册提交之后，数据写进 Mock 的会话内存数组，然后切到供应商列表页，刷新之后能看到刚才提交的记录。这比提交完只弹一个“成功”提示有说服力得多。实现上很简单，Mock 文件里在 response 函数外部定义一个持久数组，注册接口 push 数据，列表接口返回时带上新增的数据。

打包部署用一条命令收尾。

npm run build npm run preview

build 产物是纯静态文件，扔到任意 nginx、对象存储或内网 Web 服务里都能跑。preview 是 Vite 自带的本地预览命令。在项目根目录跑 preview，浏览器输入提示的地址就能完整演示一遍。

页面原型做到这步，就不再是“几张图”了，而是一套能演示、能点评、能直接交给开发当界面对照的可运行系统。我自己的习惯是每做一个供应链系统，都先花两三天把核心页面原型搭到这个程度，再进入正式开发。原型阶段翻过的车、踩过的坑，全部在开发前消化掉。它当然不能代替需求文档，但能逼着业务方在开工前把“差不多就是这样”变成逐字段的确认。希望这些踩坑经验能帮到你，省掉在评审会上无话可说、在演示现场白屏尴尬的体验。

本文还有配套的精品资源，点击获取