聲明：該文章由作者（李文雯）發(fā)表，轉(zhuǎn)載此文章須經(jīng)作者同意并請(qǐng)附上出處(0XUCN)及本頁(yè)鏈接。。

小兔鮮兒-小程序采用 UniApp + Vue3 最新技術(shù)棧開(kāi)發(fā)，涵蓋了微信登錄，微信支付，購(gòu)物車(chē)管理，訂單管理等功能。

小兔鮮兒體系包含五個(gè)端：微信小程序端，H5 端，App 端，PC 端，管理后臺(tái)。

uni-app?開(kāi)發(fā)的微信小程序端，通過(guò)條件編譯能兼容?H5 端?和?App 端。

二、開(kāi)源協(xié)議

使用Apache-2.0開(kāi)源協(xié)議

三、界面展示項(xiàng)目截圖

?

四、功能概述

微信小程序端：該項(xiàng)目包含了從首頁(yè)瀏覽商品，到商品詳情，微信登錄，加入購(gòu)物車(chē)，提交訂單，微信支付，訂單管理等功能。

最新技術(shù)棧

基于 uni-app 多端開(kāi)發(fā)框架，采用 Vue3 + TS + Pinia + UniUI 的最新組合開(kāi)發(fā)，編碼符合 ESLint + Prettierrc + Git Hooks 團(tuán)隊(duì)規(guī)范。

最佳的實(shí)踐

Vue3+TS 組合式 API 最佳實(shí)踐，開(kāi)發(fā)主流微信小程序端并打包上線(xiàn)，同時(shí)兼容 H5 端，App 端。

最多的業(yè)務(wù)

涵蓋了猜你喜歡、熱門(mén)推薦、商品分類(lèi)、商品詳情、微信登錄、用戶(hù)管理、地址管理、購(gòu)物車(chē)管理、訂單管理等功能。包含微信登錄，微信支付等業(yè)務(wù)。

項(xiàng)目模塊

項(xiàng)目起步

首頁(yè)模塊

推薦模塊

分類(lèi)模塊

詳情模塊

登錄模塊

用戶(hù)模塊

地址模塊

SKU 模塊

購(gòu)物車(chē)模塊

訂單模塊

項(xiàng)目打包

來(lái)源：小兔鮮兒官方文檔

五、技術(shù)選型

項(xiàng)目架構(gòu)

技術(shù)棧

前端框架：uni-app (Vue3 + TS)

狀態(tài)管理：pinia

組件庫(kù)：uni-ui

開(kāi)發(fā)環(huán)境

Windows 版本：Windows 11 家庭中文版

開(kāi)發(fā)工具：VS Code 、 HbuilderX 、 微信開(kāi)發(fā)者工具

Node 版本：v16.15.0

pnpm 版本：v8.6.10

運(yùn)行程序

1、安裝依賴(lài)

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

2、運(yùn)行程序

# 微信小程序端 npm run dev:mp-weixin # H5端 npm run dev:h5 # App端 需 HbuilderX 工具，運(yùn)行 - 運(yùn)行到手機(jī)或模擬器

3、微信開(kāi)發(fā)者工具導(dǎo)入?

├── .husky ? ? ? ? ? ? ? ? ? ? # Git Hooks├── .vscode ? ? ? ? ? ? ? ? ? ?# VS Code 插件 + 設(shè)置├── dist ? ? ? ? ? ? ? ? ? ? ? # 打包文件夾（可刪除重新打包├── src ? ? ? ? ? ? ? ? ? ? ? ?# 源代碼│ ? ├── components ? ? ? ? ? ? # 全局組件│ ? ├── composables ? ? ? ? ? ?# 組合式函數(shù)│ ? ├── pages ? ? ? ? ? ? ? ? ?# 主包頁(yè)面│ ? ? ? ├── index ? ? ? ? ? ? ? # 首頁(yè)│ ? ? ? ├── category ? ? ? ? ? ?# 分類(lèi)頁(yè)│ ? ? ? ├── cart ? ? ? ? ? ? ? ?# 購(gòu)物車(chē)│ ? ? ? ├── my ? ? ? ? ? ? ? ? ?# 我的│ ? ? ? ├── goods ? ? ? ? ? ? ? # 商品詳情│ ? ? ? └── hot ? ? ? ? ? ? ? ? # 熱門(mén)推薦│ ? ? ? └── login ? ? ? ? ? ? ? # 登錄頁(yè)│ ? ├── pagesMember ? ? ? ? ? ?# 分包頁(yè)面(用戶(hù)模塊)│ ? ? ? ├── address ? ? ? ? ? ? # 地址管理│ ? ? ? ├── address-form ? ? ? ?# 地址表單│ ? ? ? ├── profile ? ? ? ? ? ? # 用戶(hù)信息│ ? ? ? └── settings ? ? ? ? ? ?# 用戶(hù)設(shè)置│ ? ├── pagesOrder ? ? ? ? ? ? # 分包頁(yè)面(訂單模塊)│ ? ? ? ├── create ? ? ? ? ? ? ?# 創(chuàng)建訂單│ ? ? ? ├── detail ? ? ? ? ? ? ?# 訂單詳情│ ? ? ? ├── list ? ? ? ? ? ? ? ?# 訂單列表│ ? ? ? └── payment ? ? ? ? ? ? # 支付結(jié)果│ ? ├── services ? ? ? ? ? ? ? # 所有請(qǐng)求│ ? ├── static ? ? ? ? ? ? ? ? # 存放應(yīng)用引用的本地靜態(tài)資源的目錄│ ? ? ? ├── images ? ? ? ? ? ? ?# 普通圖片│ ? ? ? └── tabs ? ? ? ? ? ? ? ?# tabBar 圖片│ ? ├── stores ? ? ? ? ? ? ? ? # 全局 pinia store│ ? ? ? ├── modules ? ? ? ? ? ? # 模塊│ ? ? ? └── index.ts ? ? ? ? ? ?# store 入口│ ? ├── styles ? ? ? ? ? ? ? ? # 全局樣式│ ? ? ? └── fonts.scss ? ? ? ? ?# 字體圖標(biāo)│ ? ├── types ? ? ? ? ? ? ? ? ?# 類(lèi)型聲明文件│ ? ├── utils ? ? ? ? ? ? ? ? ?# 全局方法│ ? ├── App.vue ? ? ? ? ? ? ? ?# 入口頁(yè)面│ ? ├── main.ts ? ? ? ? ? ? ? ?# Vue初始化入口文件│ ? ├── pages.json ? ? ? ? ? ? # 配置頁(yè)面路由等頁(yè)面類(lèi)信息│ ? ├── manifest.json ? ? ? ? ?# 配置appid等打包信息│ ? └── uni.scss ? ? ? ? ? ? ? # uni-app 內(nèi)置的常用樣式變量├── .eslintrc.cjs ? ? ? ? ? ? ?# eslint 配置├── .prettierrc.json ? ? ? ? ? # prettier 配置├── .gitignore ? ? ? ? ? ? ? ? # git 忽略文件├── index.html ? ? ? ? ? ? ? ? # H5 端首頁(yè)├── package.json ? ? ? ? ? ? ? # package.json 依賴(lài)├── tsconfig.json ? ? ? ? ? ? ?# typescript 配置└── vite.config.ts ? ? ? ? ? ? # vite 配置

六、源碼地址

https://gitee.com/Megasu/uniapp-shop-vue3-ts?url=jjbxz.cn

[超站]友情鏈接：

四季很好，只要有你，文娛排行榜：https://www.yaopaiming.com/
關(guān)注數(shù)據(jù)與安全，洞悉企業(yè)級(jí)服務(wù)市場(chǎng)：https://www.ijiandao.com/