一款基于 UniApp + Vue3 构建、开源免费、简洁精美的电商平台模板，适用微信小程序端，H5 端，App 端！

uniapp-shop-vue3-ts 是一个开源免费（Apache-2.0）、简洁精美的电商平台模板，基于 UniApp 框架与 Vue 3 构建，全面适配微信小程序端、H5 端以及 App 端。此模板旨在为开发者提供一个高效、易扩展且美观的电商解决方案，便于快速搭建和部署线上商城。

应用场景

• B2C 电商平台：为商家提供一个完整的线上销售平台，支持商品展示、购物车、订单管理等功能。
• B2B 商贸平台：适用于企业间的商品批发与采购，支持大额交易、合同管理等特性。
• O2O 服务平台：结合线上线下服务，为商家提供线上预约、线下消费的一体化解决方案。
• 多商家入驻平台：支持多个商家入驻，提供店铺管理、商品上架、交易结算等功能。

功能模块

此模板包含了从首页浏览商品，到商品详情，微信登录，加入购物车，提交订单，微信支付，订单管理等功能。

主要模块包括：首页模块、推荐模块、分类模块、详情模块、登录模块、用户模块、地址模块、SKU 模块、购物车模块、订单模块

功能特点

• 响应式设计：支持多种设备屏幕，包括手机、平板、电脑等，提供一致的用户体验。
• 高效性能：利用 Vue 3 的响应式系统和 TypeScript 的静态类型检查，提升应用性能和开发效率。
• 丰富组件：提供丰富的 UI 组件，如轮播图、商品列表、弹窗等，方便快速构建页面。
• 可扩展性：模块化设计，易于添加新功能或修改现有功能，满足个性化需求。

项目技术栈

• 前端框架：UniApp (Vue3 + TypeScript)
• 状态管理：pinia
• 组件库：uni-ui

开发环境

• Windows 版本： Windows 11 家庭中文版 / MacOS 15.0
• 开发工具： VS Code 、 HbuilderX 、 微信开发者工具
• Node 版本： v16.15.0 / v22.15.0
• pnpm 版本：v8.6.10 / v9.15.3

运行程序

安装依赖

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

# pnpm
pnpm i --registry=https://registry.npmmirror.com

运行程序

# 微信小程序端
npm run dev:mp-weixin

# H5 端
npm run dev:h5

# App 端
需 HbuilderX 工具，运行 - 运行到手机或模拟器

微信开发者工具导入

微信开发者工具导入 /dist/dev/mp-weixin 目录

项目目录

├── .husky                     # Git Hooks
├── .vscode                    # VS Code 插件 + 设置
├── dist                       # 打包文件夹（可删除重新打包）
├── src                        # 源代码
│   ├── components             # 全局组件
│   ├── composables            # 组合式函数
│   ├── pages                  # 主包页面
│       ├── index               # 首页
│       ├── category            # 分类页
│       ├── cart                # 购物车
│       ├── my                  # 我的
│       ├── goods               # 商品详情
│       └── hot                 # 热门推荐
│       └── login               # 登录页
│   ├── pagesMember            # 分包页面(用户模块)
│       ├── address             # 地址管理
│       ├── address-form        # 地址表单
│       ├── profile             # 用户信息
│       └── settings            # 用户设置
│   ├── pagesOrder             # 分包页面(订单模块)
│       ├── create              # 创建订单
│       ├── detail              # 订单详情
│       ├── list                # 订单列表
│       └── payment             # 支付结果
│   ├── services               # 所有请求
│   ├── static                 # 存放应用引用的本地静态资源的目录
│       ├── images              # 普通图片
│       └── tabs                # tabBar 图片
│   ├── stores                 # 全局 pinia store
│       ├── modules             # 模块
│       └── index.ts            # store 入口
│   ├── styles                 # 全局样式
│       └── fonts.scss          # 字体图标
│   ├── types                  # 类型声明文件
│   ├── utils                  # 全局方法
│   ├── App.vue                # 入口页面
│   ├── main.ts                # Vue 初始化入口文件
│   ├── pages.json             # 配置页面路由等页面类信息
│   ├── manifest.json          # 配置 appid 等打包信息
│   └── uni.scss               # uni-app 内置的常用样式变量
├── .eslintrc.cjs              # eslint 配置
├── .prettierrc.json           # prettier 配置
├── .gitignore                 # git 忽略文件
├── index.html                 # H5 端首页
├── package.json               # package.json 依赖
├── tsconfig.json              # typescript 配置
└── vite.config.ts             # vite 配置

开源地址

点击这里

以上关于一款基于 UniApp + Vue3 构建、开源免费、简洁精美的电商平台模板，适用微信小程序端，H5 端，App 端！的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。