【uniapp-shop-vue3-ts】开源下载和安装教程

1、项目介绍

小兔鲜儿是基于uni-app开发的跨端电商项目，采用Vue3+TypeScript技术栈，支持微信小程序、H5、App三端运行。项目包含商品浏览、购物车、订单支付等完整电商功能模块，工程结构清晰，适合学习uni-app多端开发。

2、项目下载位置

源码托管在GitCode平台，可通过以下方式获取：

1. 直接下载ZIP压缩包
2. 使用Git命令克隆仓库：

git clone https://gitcode.com/Megasu/uniapp-shop-vue3-ts.git

3、项目安装环境配置

基础环境要求

• Node.js v16.15.0 或更高版本
• pnpm v8.6.10 或更高版本
• 微信开发者工具（小程序端开发需要）

![Node版本验证示例]

通过命令 node -v 和 pnpm -v 验证版本

开发工具配置

建议使用VS Code配合以下插件：

• Volar（Vue3支持）
• TypeScript Vue Plugin
• Uni-app插件

4、项目安装方式

步骤1：安装依赖

# 使用pnpm安装（推荐）
pnpm i --registry=https://registry.npmmirror.com

# 或使用npm
npm i --registry=https://registry.npmmirror.com

步骤2：运行项目

根据目标平台选择对应命令：

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

# H5开发模式
pnpm run dev:h5

步骤3：导入开发者工具

1. 微信开发者工具导入dist/dev/mp-weixin目录
2. 确保勾选"不校验合法域名"（开发阶段）

5、项目处理脚本

关键npm脚本说明

{
  "scripts": {
    "dev:mp-weixin": "uni -p mp-weixin",
    "dev:h5": "uni -p h5",
    "build:mp-weixin": "uni build -p mp-weixin",
    "lint": "eslint . --ext .vue,.js,.ts",
    "prepare": "husky install"
  }
}

自定义处理

• 修改vite.config.ts配置跨域代理
• 调整manifest.json中的AppID等配置
• 通过pages.json管理路由和页面配置

提示：首次运行前建议执行 pnpm prepare 初始化Git Hooks