小兔鲜儿简洁、清爽、美观、大方的商城 Vue3 应用

技术 2024-01-16 10:37

声明：该文章由作者（李文雯）发表，转载此文章须经作者同意并请附上出处(0XUCN)及本页链接。。

小兔鲜儿-小程序采用 UniApp + Vue3 最新技术栈开发，涵盖了微信登录，微信支付，购物车管理，订单管理等功能。

小兔鲜儿体系包含五个端：微信小程序端，H5 端，App 端，PC 端，管理后台。

uni-app 开发的微信小程序端，通过条件编译能兼容 H5 端和 App 端。

二、开源协议

使用Apache-2.0开源协议

三、界面展示项目截图

四、功能概述

微信小程序端：该项目包含了从首页浏览商品，到商品详情，微信登录，加入购物车，提交订单，微信支付，订单管理等功能。

五、技术选型

项目架构

技术栈

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

状态管理：pinia

组件库：uni-ui

开发环境

Windows 版本：Windows 11 家庭中文版

开发工具：VS Code 、 HbuilderX 、微信开发者工具

Node 版本：v16.15.0

pnpm 版本：v8.6.10

运行程序

1、安装依赖

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

2、运行程序

# 微信小程序端 npm run dev:mp-weixin # H5端 npm run dev:h5 # App端需 HbuilderX 工具，运行 - 运行到手机或模拟器

3、微信开发者工具导入

├── .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 配置