uniapp-shop-vue3-ts：零门槛搭建跨端电商应用的一站式解决方案

核心价值解析

小兔鲜儿电商项目是基于uni-app框架开发的全栈解决方案，采用Vue3+TypeScript技术栈构建，支持微信小程序、H5和App多端运行。该项目整合了商品展示、购物车管理、订单支付等完整电商功能模块，通过组合式API和Pinia状态管理实现高效开发。工程结构采用模块化设计，包含12个核心业务模块和20+实用功能组件，特别适合新手开发者学习跨端应用开发。

验证开发环境

检查系统依赖

在开始前，请确保你的开发环境满足以下要求：

# 验证Node.js版本（需v16.15.0+）
node -v
# 预期输出示例：v16.15.0 或更高版本

# 验证pnpm版本（需v8.6.10+）
pnpm -v
# 预期输出示例：8.6.10 或更高版本

[!TIP] 如果尚未安装pnpm，可以通过以下命令安装：

npm install -g pnpm

配置开发工具

推荐使用VS Code并安装以下必备插件：

• Volar：提供Vue3语法支持和代码提示
• TypeScript Vue Plugin：增强TypeScript与Vue的集成能力
• Uni-app插件：提供uni-app项目的快捷开发功能

获取项目源码

克隆仓库代码

# 通过Git克隆项目仓库
git clone https://gitcode.com/megasu/uniapp-shop-vue3-ts

进入项目目录

# 切换到项目文件夹
cd uniapp-shop-vue3-ts

安装项目依赖

⚠️ 重要步骤：使用指定镜像源安装依赖，确保依赖包正确下载

# 使用pnpm安装项目依赖（推荐）
pnpm i --registry=https://registry.npmmirror.com
# 或使用npm安装
npm i --registry=https://registry.npmmirror.com

[!TIP] 首次运行项目前，建议执行以下命令初始化Git Hooks：

pnpm prepare

启动开发服务

根据目标开发平台选择对应的启动命令：

微信小程序开发

# 启动微信小程序开发模式
pnpm run dev:mp-weixin

H5开发模式

# 启动H5开发模式
pnpm run dev:h5

导入开发者工具

⚠️ 关键步骤：正确导入项目到微信开发者工具

1. 打开微信开发者工具，选择"导入项目"
2. 浏览并选择项目中的dist/dev/mp-weixin目录
3. 勾选"不校验合法域名、web-view（业务域名）校验"选项
4. 点击"确定"完成导入

定制项目配置

核心配置文件说明

配置文件	相对路径	主要作用
vite.config.ts	/vite.config.ts	配置跨域代理、构建选项
manifest.json	/src/manifest.json	设置AppID、应用名称等基础信息
pages.json	/src/pages.json	管理路由和页面配置

环境变量配置

项目支持多环境配置，可在根目录创建以下文件：

• .env.development：开发环境变量
• .env.production：生产环境变量

构建生产版本

当开发完成后，可使用以下命令构建对应平台的生产版本：

# 构建微信小程序生产版本
pnpm run build:mp-weixin

# 构建H5生产版本
pnpm run build:h5

常见问题速查表

Q: 运行时报错"找不到模块vue"怎么办？

A: 这通常是依赖未正确安装导致，尝试删除node_modules和pnpm-lock.yaml后重新执行pnpm i

Q: 微信开发者工具提示"未找到入口 app.json"？

A: 请确保导入的是dist/dev/mp-weixin目录，而非项目根目录

Q: H5模式下接口请求跨域如何解决？

A: 修改vite.config.ts文件，在server.proxy配置中添加对应代理规则

Q: 如何修改小程序的AppID？

A: 编辑src/manifest.json文件，修改mp-weixin节点下的appid字段

Q: 项目支持哪些额外的命令脚本？

A: 查看package.json的scripts部分，包含代码检查(pnpm run lint)等实用命令