2025年了，还在用 UniApp 写小程序？用 Vue3 + Vite 10分钟撸出商城小程序UI（附完整源码）

2025年了还在用 UniApp 写小程序用 Vue3 Vite 10分钟撸出商城小程序UI附完整源码 本文已收录至「Vue3实战系列」专栏 | 阅读本文约 8 分钟 | 文末获取完整源码大家好我是老李 做前端这几年见过太多同学为了写小程序 UI 就去啃 UniApp 文档配环境配到想哭。其实对于纯前端展示型的小程序 UI完全没必要用 UniApp今天给你分享一套用Vue3 Vite写的移动端商城小程序 UI 源码5个核心页面全部可以直接运行无需后台、无需配置微信账号开箱即用。 先看效果再谈技术效果不好看直接划走我不怪你 页面核心亮点 首页搜索栏 自动轮播 Banner 分类入口 热销商品双列网格 分类页左侧导航联动 右侧商品列表10个类目实时切换️ 商品详情SKU 颜色/尺码选择器 数量控制 底部加购/立即购买 购物车Pinia 全局状态 全选/单选/删除 结算栏动态计算 个人中心渐变用户头部 订单状态栏 功能菜单整体风格红色主题#e93323手机壳模拟器包裹截图即可上架/演示 为什么不用 UniApp这是个好问题必须说清楚。UniApp 是为真实发布到小程序/App设计的框架有自己的编译器和运行时。如果你的目标是做作品集毕业设计参考接外包做 UI 方案出售/展示 UI 模板那 Vue3 Vite 才是最佳选择UniApp: 配 HBuilderX → 开 AppID → 真机调试 → 改编译错误 → 崩溃... Vue3: npm install → npm run dev → 浏览器打开搞定 ✅本项目构建后的产物同样可以通过web-view嵌入微信小程序几乎零改动。️ 技术栈一览Vue 3.4 —— 核心框架Composition API script setup Vite 5 —— 极速构建工具冷启动 1s TypeScript 5 —— 类型安全IDE 智能提示 Vue Router 4 —— 路由管理懒加载分包 Pinia 2 —— 状态管理购物车 / 用户信息 SCSS —— 样式预处理全局变量注入无任何 UI 组件库依赖手写组件 体积轻、自由度高 项目结构shop-basic/ ├── src/ │ ├── pages/ │ │ ├── index/ # 首页 │ │ ├── category/ # 分类页 │ │ ├── goods/ # 商品详情 │ │ ├── cart/ # 购物车 │ │ └── user/ # 个人中心 │ ├── stores/ │ │ └── cart.ts # Pinia 购物车 Store │ ├── router/ │ │ └── index.ts │ ├── styles/ │ │ └── variables.scss # 全局 SCSS 变量 │ └── App.vue # Phone Shell 容器 ├── vite.config.ts └── package.json 核心代码片段1. 手机壳模式让截图更专业这是整个项目最妙的设计——把 App 渲染在一个仿 iPhone 12 的手机壳里!-- App.vue -- template div classapp-container div classphone-shell div classstatus-bar span9:41/span span /span /div div classpage-content router-view / /div TabBar / /div /div /template style langscss .app-container { background: linear-gradient(135deg, #1a1a2e, #16213e); min-height: 100vh; display: flex; justify-content: center; align-items: center; } .phone-shell { width: 390px; height: 844px; background: #fff; border-radius: 40px; overflow: hidden; box-shadow: 0 30px 80px rgba(0, 0, 0, .6); display: flex; flex-direction: column; } /style效果截图直接是「小程序 背景」的完整演示图适合闲鱼/Portfolio 展示。2. Pinia 购物车核心状态管理很多同学写购物车用 Vuex又复杂又啰嗦。用 Pinia Composition API 写法极简// src/stores/cart.tsimport{defineStore}frompiniaimport{ref,computed}fromvueexportinterfaceCartItem{id:numbergoodsId:numbertitle:stringprice:numberquantity:numbersku:string// 黑色 / XLchecked:boolean}exportconstuseCartStoredefineStore(cart,(){constcartListrefCartItem[]([])// 计算属性consttotalCountcomputed(()cartList.value.reduce((sum,item)sumitem.quantity,0))constcheckedItemscomputed(()cartList.value.filter(itemitem.checked))consttotalPricecomputed(()checkedItems.value.reduce((sum,item)sumitem.price*item.quantity,0))constisAllCheckedcomputed(()cartList.value.length0cartList.value.every(itemitem.checked))// 加入购物车自动合并同 SKUfunctionaddItem(goodsId:number,color:string,size:string,qty:number){constsku${color}/${size}constexistingcartList.value.find(ii.goodsIdgoodsIdi.skusku)if(existing){existing.quantityqty// 已有 → 加数量}else{cartList.value.push({id:Date.now(),goodsId,title:...,price:89,quantity:qty,sku,checked:true})}}// 全选 / 全不选functiontoggleCheckAll(){constnext!isAllChecked.value cartList.value.forEach(item{item.checkednext})}// 删除已勾选商品functionremoveChecked(){cartList.valuecartList.value.filter(item!item.checked)}return{cartList,totalCount,totalPrice,isAllChecked,checkedItems,addItem,toggleCheckAll,removeChecked}})这段代码直接复制到你的项目里就能用零配置。3. SCSS 主题色变量改主题色只要改一个文件全局生效// src/styles/variables.scss $primary: #e93323; // 主题红经典电商色 $primary-light: #ff6b5b; $primary-dark: #c0281a; $bg: #f5f5f5; $text-primary: #333; $text-secondary: #666; $text-hint: #999; $border: #f0f0f0; $white: #fff;在vite.config.ts中全局注入无需每个 vue 文件手动 import// vite.config.tsexportdefaultdefineConfig({css:{preprocessorOptions:{scss:{additionalData:import /styles/variables.scss;}}}})4. 路由懒加载配置// src/router/index.tsimport{createRouter,createWebHistory}fromvue-routerexportdefaultcreateRouter({history:createWebHistory(),routes:[{path:/,component:()import(/pages/index/index.vue)},{path:/category,component:()import(/pages/category/index.vue)},{path:/goods/:id,component:()import(/pages/goods/detail.vue)},{path:/cart,component:()import(/pages/cart/index.vue)},{path:/user,component:()import(/pages/user/index.vue)},],})全部使用动态import()懒加载Vite 构建时自动分包首屏加载速度更快。▶️ 快速运行# 克隆 / 解压后cdshop-basic# 安装依赖npminstall# 启动开发服务器默认 http://localhost:5173npmrun dev# 构建生产版本npmrun build运行成功后浏览器打开即可看到手机壳效果。 源码包含内容拿到源码后你得到的是✅ 5 个完整页面无占位符全部有真实 Mock 数据✅ Pinia 购物车加购 / 删除 / 全选 / 结算✅ SCSS 主题色变量系统改一处全局生效✅ Phone Shell 模拟器 UI截图即演示图✅ Vite 5 Vue 3.4 TypeScript 5 最新版本✅ 注释完善代码规范适合二次开发❌ 不包含后台管理系统、数据库、接口服务纯前端 UI数据为 Mock 适合哪些人用途说明毕业设计作为前端 UI 部分接上 SpringBoot / Node 后台即完整项目作品集做完整 UI 截图放简历/牛客/GitHub‍前端学习参考 Pinia、Vue Router、SCSS 变量的实际用法接外包快速出 UI 方案给客户确认再接后端开发小程序发布用web-view嵌套本 H5或改造为 uni-app 项目 关于我我是源码老李专注 Vue3 / React 移动端 UI 开发。手里有几套整理好的源码包括️ 通用商城小程序 UI就是本文这套️ 淘宝客优惠券 / 返利聚合小程序 知识付费课程小程序含视频播放页 闲鱼搜索「源码老李」即可找到全部源码价格透明支持毕设答辩、二次开发咨询买了不满意可以退。✍️ 写在最后这套项目的核心价值不是代码本身而是一种快速原型验证的思路先用 Vue3 Vite 做纯前端 UI用 Mock 数据跑通所有交互确认 UI 没问题再接入后端 API 替换 Mock最终用 web-view 或 uni-app 包装发布这个思路比上来就配小程序账号 真机调试省了至少一半的时间。如果这篇文章对你有帮助点个赞 再走吧你的支持是我继续分享的动力 ️标签Vue3ViteTypeScriptPinia小程序商城源码毕业设计SCSS移动端UI前端源码