# 46-在线商城（京东） - 功能说明

# 项目概述

在线商城（京东）是一个基于 Vue3 + Element Plus 的仿京东官网电商前端项目,采用前后端分离架构,完全模仿京东官网的UI设计风格和交互体验。系统以京东红为主品牌色,提供完整的电商购物流程,包括商品浏览、购物车管理、在线下单、订单管理等功能,为用户提供与京东官网一致的购物体验。

# 项目概览

# ✨ 创新点

# 1. 京东UI完全仿真

视觉规范高度还原:主色调采用京东红(#E1251B),辅助色为灰色系,完全遵循京东品牌色彩规范。
交互逻辑一致:搜索框、商品列表、购物车等核心交互完全遵循京东官网的用户操作习惯。

# 2. 现代化前端技术栈

Vue3 Composition API:采用最新的 Vue3.4.29 和 script setup 语法,代码简洁高效。
Vite5 构建工具:超快的热更新和构建速度,极大提升开发体验。
TailwindCSS + Sass:原子化CSS与传统预处理器结合,样式开发灵活高效。
Pinia状态管理:Vue3官方推荐的状态管理库,替代Vuex,更简洁易用。

# 3. 完整的电商购物流程

首页三栏布局:左侧分类菜单、中间轮播图、右侧用户信息和推荐商品,完全仿京东首页布局。
商品详情展示:商品主图、价格、库存、销量、详情介绍,提供完整的商品信息。
购物车功能:商品选择、数量调整、全选/取消全选、价格计算、批量删除等完整功能。
订单管理:订单创建、支付、取消、订单列表查看等全流程管理。

# 4. 智能数据加载与缓存

骨架屏加载:首次加载显示骨架屏,提升用户体验,避免白屏。
数据分页加载:无限滚动加载商品数据,减少单次请求压力。
页面数据缓存:路由切换时缓存数据,再次进入无需重新加载。
错误状态处理:网络请求失败时显示错误提示和重试按钮。

# 5. 用户体验优化

搜索功能:支持商品名称搜索,实时显示搜索结果。
分类筛选:点击左侧分类菜单或商品分类标签,快速筛选商品。
收货地址管理:支持新增、编辑、删除收货地址,下单时快速选择。
商品收藏:收藏喜欢的商品和店铺,方便下次快速查找。
浏览历史:自动记录商品浏览历史,方便回溯查看。

# ✨ 项目亮点

# 一、业务功能亮点

完整的电商购物闭环:从商品浏览、加购、下单到支付、订单管理,流程完整。
京东风格首页:三栏布局、轮播图、分类菜单、推荐商品,完全仿京东首页设计。
购物车智能管理:支持商品选择、数量调整、全选、批量删除、价格实时计算。
订单全流程管理:订单创建、支付、取消、查看订单列表和详情。
收货地址管理:支持多地址管理,下单时快速选择,提升购物效率。
商品收藏与浏览:收藏喜欢的商品和店铺,自动记录浏览历史。

# 二、技术实现亮点

现代化前端技术栈:Vue 3.4.29 + Element Plus 2.8.4 + Vite 5.3.1 + TailwindCSS 3.4.1。
Axios完整封装:请求/响应拦截器、自动添加Token、统一错误处理。
JWT Token认证:基于Token的无状态认证,安全高效。
富文本编辑器:支持商品详情的富文本编辑与展示。
ECharts数据可视化:支持订单数据、销量数据等可视化展示。
完善的数据加载状态:加载中、错误、空数据等多种状态的UI反馈。

# 三、用户体验亮点

京东官网级UI设计:
- 主色调:京东红(#E1251B)作为主品牌色。
- 辅助色:灰色系(#333, #666, #999)用于文字层级。
- 圆角设计:统一使用4px-8px的圆角。
- 间距系统:采用8px基础间距系统(8, 16, 24, 32px)。
交互动效优化:
- 搜索框hover和focus状态的阴影变化。
- 商品卡片hover时的缩放和阴影效果。
- 按钮点击的动画反馈。
- 轮播图的平滑过渡和指示器动画。
响应式布局:完美适配移动端、平板、桌面端,遵循京东适配标准。
骨架屏加载:首次加载显示骨架屏,提升用户体验。
错误状态友好提示:网络错误、空数据等状态都有清晰的UI反馈和操作引导。

# 普通用户

# 首页浏览

首页展示:

顶部导航:Logo、搜索框、用户信息。
左侧分类菜单:展示所有商品分类,点击筛选商品。
中间轮播图:展示推荐商品和活动信息。
右侧用户信息:显示登录状态、用户头像、会员等级。
右侧新品推荐:展示3个推荐商品,点击跳转商品详情。
商品列表:按分类展示商品,支持无限滚动加载。

搜索功能:

在顶部搜索框输入关键词,点击搜索按钮。
实时显示搜索结果,支持分页加载。
点击清除按钮,恢复默认商品列表。

分类筛选:

点击左侧分类菜单,筛选对应分类的商品。
点击"全部商品分类",显示所有商品。

# 商品浏览

商品列表:

商品卡片展示:商品主图、名称、价格、销量、店铺名称。
商品分类标签:显示商品所属分类。
商品hover效果:鼠标悬停时卡片放大,显示阴影。
点击商品卡片,跳转商品详情页。

商品详情:

商品主图:展示商品主图。
商品信息:商品名称、价格、销量、库存。
商品详情:富文本展示商品详细介绍。
操作按钮:加入购物车、立即购买。

商品浏览记录:

自动记录用户浏览的商品,生成浏览历史。
在个人中心查看浏览历史,方便回溯。

# 购物车管理

加入购物车:

在商品详情页点击"加入购物车"按钮。
商品自动添加到购物车,数量默认为1。
如果购物车已有该商品,数量+1。

购物车列表:

显示所有加入购物车的商品。
商品信息:商品图片、名称、规格、价格、数量、小计。
全选/取消全选:勾选全选框,选中或取消所有商品。
单选:勾选商品前的复选框,选中或取消单个商品。

数量调整:

点击"-"按钮,减少商品数量(最少为1)。
点击"+"按钮,增加商品数量。
数量变化后,小计和总价自动更新。

删除商品:

点击商品右侧的"删除"按钮,删除单个商品。
点击"删除选中",批量删除选中的商品。

价格计算:

实时计算选中商品的总价。
底部显示合计金额和已选择商品数量。

去结算:

点击"去结算"按钮,跳转订单确认页。
如果未选中商品,按钮禁用状态。

# 订单管理

创建订单:

在购物车点击"去结算",进入订单确认页。
选择收货地址(如无地址需先添加)。
确认商品信息(商品、数量、总金额)。
填写订单备注(可选)。
点击"提交订单",创建订单。

立即购买:

在商品详情页点击"立即购买"按钮。
弹出订单确认弹窗。
选择商品数量(默认为1)。
选择收货地址。
填写订单备注。
点击"提交订单",创建订单。

订单支付:

订单创建后,跳转支付页面。
使用余额支付。
支付成功后,订单状态变为"待发货"。

订单列表:

查看所有订单,按状态筛选(待支付/待发货/待收货/已完成/已取消)。
订单信息:订单号、商品信息、总金额、订单状态、创建时间。

订单详情:

查看订单详细信息。
商品信息:商品图片、名称、价格、数量。
收货地址:收货人姓名、电话、地址。
订单金额:商品金额、运费、总金额。

取消订单:

在订单详情页点击"取消订单"按钮。
订单状态变为"已取消"。
仅"待支付"状态的订单可以取消。

订单评价:

订单完成后,对商品进行评价(评分+文字评价)。
评价内容显示在商品详情页。

# 收货地址管理

地址列表:

在个人中心查看所有收货地址。
地址信息:收货人姓名、电话、地址。

新增地址:

点击"新增地址"按钮。
填写收货人姓名、电话、省市区、详细地址。
设置是否为默认地址。
提交保存。

编辑地址:

点击地址右侧的"编辑"按钮。
修改地址信息。
提交保存。

删除地址:

点击地址右侧的"删除"按钮。
确认删除。

# 商品收藏

收藏商品:

在商品详情页点击"收藏"按钮。
商品添加到收藏列表。

收藏列表:

在个人中心查看所有收藏的商品。
点击商品跳转商品详情页。
点击"取消收藏",从收藏列表移除。

收藏店铺:

在店铺页面点击"收藏店铺"按钮。
店铺添加到收藏列表。

店铺收藏列表:

在个人中心查看所有收藏的店铺。
点击店铺跳转店铺页面。
点击"取消收藏",从收藏列表移除。

# 个人中心

个人信息:

查看个人信息:用户名、昵称、头像、电话、邮箱、会员等级。
修改个人信息:点击"编辑"按钮,修改昵称、头像、电话、邮箱。
提交保存。

修改密码:

填写旧密码、新密码、确认新密码。
提交修改。

余额管理:

查看账户余额。
余额充值(调用充值接口)。
查看余额变动记录。

浏览历史:

查看商品浏览历史记录。
点击商品跳转商品详情页。

# 用户认证

用户注册:

填写用户名、密码、昵称、邮箱。
上传头像(可选)。
提交注册。
跳转登录页。

用户登录:

点击顶部导航的"登录"按钮,弹出登录弹窗。
填写用户名、密码。
点击"登录"按钮。
登录成功后,显示用户信息。
登录失败,显示错误提示。

忘记密码:

点击"忘记密码"链接,跳转找回密码页。
填写手机号、验证码、新密码。
提交重置密码。

退出登录:

点击用户信息区域的"退出"按钮。
清除登录信息,跳转首页。

# 功能权限对照表

功能模块	普通用户
首页浏览	✓
商品搜索	✓
商品分类筛选	✓
商品列表浏览	✓
商品详情查看	✓
商品浏览记录	✓(仅自己的)
加入购物车	✓
购物车管理	✓
立即购买	✓
订单创建	✓
订单支付	✓
订单列表	✓(仅自己的)
订单详情	✓(仅自己的)
取消订单	✓(仅自己的)
订单评价	✓(仅自己的)
收货地址管理	✓
商品收藏	✓
店铺收藏	✓
个人信息管理	✓
修改密码	✓
余额管理	✓
用户注册	✓
用户登录	✓
忘记密码	✓
退出登录	✓

# 订单状态说明

# 商品订单状态

待支付:订单已创建,等待用户支付
待发货:订单已支付,等待商家发货
待收货:商家已发货,等待用户确认收货
已完成:用户已确认收货,交易完成
已取消:用户取消订单或订单超时自动取消

# 默认账号

# 测试用户

用户名: testuser
密码: 123456

1
2

注:由于本系统为前端展示项目,具体账号信息需根据后端接口实际数据确定。

# 核心业务流程

# 用户注册流程

1. 点击顶部导航"注册"按钮,跳转注册页
2. 填写用户名、密码、昵称、邮箱
3. 上传头像(可选)
4. 点击"注册"按钮,提交注册信息
5. 系统创建用户账号(type: "USER")
6. 注册成功,跳转登录页

1
2
3
4
5
6

# 用户登录流程

1. 点击顶部导航"登录"按钮,弹出登录弹窗
2. 填写用户名、密码
3. 点击"登录"按钮,提交登录信息
4. 系统验证用户名和密码
5. 验证成功,返回JWT Token
6. 前端保存Token到localStorage
7. 登录弹窗关闭,显示用户信息
8. 触发user-login-success事件,刷新首页数据

1
2
3
4
5
6
7
8

# 商品浏览流程

1. 进入首页,自动加载轮播图、分类菜单、推荐商品、商品列表
2. 显示骨架屏,等待数据加载完成
3. 数据加载完成后,隐藏骨架屏,显示正常内容
4. 用户点击左侧分类菜单或搜索框,筛选商品
5. 商品列表滚动到底部,自动加载更多商品(无限滚动)
6. 点击商品卡片,跳转商品详情页
7. 系统自动记录商品浏览历史(调用addProductBrowsingHistory接口)

1
2
3
4
5
6
7

# 加入购物车流程

1. 在商品详情页点击"加入购物车"按钮
2. 调用addShoppingCart接口,传入商品ID和数量
3. 后端检查购物车是否已有该商品
4. 如果已有,数量+1;如果没有,新增购物车记录
5. 返回成功提示"已加入购物车"
6. 用户可继续浏览或前往购物车

1
2
3
4
5
6

# 购物车结算流程

1. 进入购物车页面,显示所有购物车商品
2. 用户勾选需要购买的商品(支持全选/单选)
3. 调整商品数量,系统实时计算总价
4. 点击"去结算"按钮(未选中商品时按钮禁用)
5. 弹出地址选择弹窗
6. 用户选择收货地址(如无地址需先添加)
7. 填写订单备注(可选)
8. 点击"提交订单"按钮
9. 调用createOrder接口,传入收货地址ID、备注等信息
10. 后端创建订单,扣减库存,删除购物车记录
11. 返回订单ID,跳转订单详情页
12. 用户进行支付操作

1
2
3
4
5
6
7
8
9
10
11
12

# 立即购买流程

1. 在商品详情页点击"立即购买"按钮
2. 弹出订单确认弹窗
3. 用户选择商品数量(默认为1)
4. 系统自动加载用户收货地址列表
5. 用户选择收货地址
6. 填写订单备注(可选)
7. 显示订单金额:商品价格 × 数量
8. 点击"提交订单"按钮
9. 调用buyNow接口,传入商品ID、数量、收货地址ID、备注等
10. 后端创建订单,扣减库存,扣减用户余额
11. 返回订单ID,订单状态变为"待发货"
12. 跳转订单详情页

1
2
3
4
5
6
7
8
9
10
11
12

# 订单支付流程

1. 订单创建后,订单状态为"待支付"
2. 用户进入订单详情页,点击"立即支付"按钮
3. 调用payOrder接口,传入订单ID
4. 后端验证订单状态和用户余额
5. 扣减用户余额,订单状态变为"待发货"
6. 返回支付成功提示
7. 订单详情页更新订单状态

1
2
3
4
5
6
7

# 订单取消流程

1. 用户进入订单详情页,订单状态为"待支付"
2. 点击"取消订单"按钮
3. 弹出确认弹窗
4. 用户确认取消
5. 调用cancelOrder接口,传入订单ID
6. 后端验证订单状态
7. 订单状态变为"已取消"
8. 如果已支付,退还用户余额
9. 恢复商品库存
10. 返回取消成功提示

1
2
3
4
5
6
7
8
9
10

# 收货地址管理流程

1. 进入个人中心-收货地址管理
2. 显示所有收货地址列表
3. 点击"新增地址"按钮,弹出地址表单
4. 填写收货人姓名、电话、省市区、详细地址
5. 设置是否为默认地址
6. 提交保存,调用addShippingAddress接口
7. 地址列表更新,显示新增地址
8. 点击"编辑"按钮,修改地址信息,调用updateShippingAddress接口
9. 点击"删除"按钮,删除地址,调用deleteShippingAddress接口

1
2
3
4
5
6
7
8
9

# 技术说明

# 系统架构

前端:Vue 3.4.29 + Element Plus 2.8.4 + Vite 5.3.1 + TailwindCSS 3.4.1
状态管理:Pinia 2.2.2
HTTP请求:Axios 1.7.5
路由管理:Vue Router 4.4.3
UI组件库:Element Plus 2.8.4 + @wocwin/t-ui-plus 1.4.13
图标库:@element-plus/icons-vue 2.3.1 + @ant-design/icons-vue 7.0.1
富文本编辑器:@wangeditor/editor 5.1.14
Markdown编辑器:@kangc/v-md-editor 2.3.18
数据可视化:ECharts 5.5.1
日期处理:dayjs 1.11.13
工具库:lodash 4.17.21
加密库:crypto-js 4.1.1 + sm-crypto 0.3.13
代码高亮:highlight.js 11.8.0
轮播图:Swiper 11.1.14
农历处理:lunar-javascript 1.6.12

# 访问地址

开发环境:http://localhost:3000
生产环境:根据部署配置确定

# API接口

接口代理:/api -> http://1.116.107.214:8083
认证方式:JWT Token(请求头:Authorization: Bearer {token})

# 核心API接口说明

# 用户认证接口

登录:POST /common/login - 用户登录,返回JWT Token
注册:PUT /common/register - 用户注册,type固定为"USER"
忘记密码:POST /common/retrievePassword - 找回密码
修改密码:POST /common/updatePassword - 修改密码
获取当前用户:GET /common/currentUser - 获取当前登录用户信息
更新当前用户:POST /common/updateCurrentUser - 更新当前用户信息

# 商品接口

轮播图列表:GET /slideshow/page - 获取首页轮播图
推荐商品:GET /product/recommend/{recommendNum} - 获取推荐商品
热销商品:GET /product/salesVolumeTop/{topNum} - 获取热销商品排行
商品分类:GET /productType/list - 获取商品分类列表
商品列表:GET /product/page - 分页获取商品列表,支持按分类、名称筛选
商品详情:GET /product/selectById/{id} - 获取商品详情
商品评价:GET /productOrderEvaluate/page - 获取商品评价列表
广告列表:GET /advertising/list - 获取广告列表

# 购物车接口

添加购物车:POST /shoppingCart/add - 添加商品到购物车
购物车列表:GET /shoppingCart/page - 获取购物车列表
更新购物车:PUT /shoppingCart/update - 更新购物车商品数量
删除购物车:DELETE /shoppingCart/delBatch - 批量删除购物车商品
创建订单:POST /shoppingCart/createOrder - 从购物车创建订单

# 订单接口

立即购买:POST /productOrder/add - 立即购买,创建订单
订单列表:GET /productOrder/page - 获取订单列表,支持按状态筛选
订单支付:POST /productOrder/pay/{id} - 支付订单
取消订单:POST /productOrder/cancel/{id} - 取消订单

# 用户相关接口

收货地址列表:GET /shippingAddress/page - 获取收货地址列表
新增地址:POST /shippingAddress/add - 新增收货地址
更新地址:PUT /shippingAddress/update - 更新收货地址
删除地址:DELETE /shippingAddress/delBatch - 删除收货地址
商品收藏列表:GET /productCollect/page - 获取商品收藏列表
添加商品收藏:POST /productCollect/add - 添加商品收藏
删除商品收藏:DELETE /productCollect/delBatch - 删除商品收藏
浏览历史:GET /productBrowsingHistory/page - 获取商品浏览历史
添加浏览记录:POST /productBrowsingHistory/add - 添加商品浏览记录
店铺收藏列表:GET /shopCollect/page - 获取店铺收藏列表
添加店铺收藏:POST /shopCollect/add - 添加店铺收藏
删除店铺收藏:DELETE /shopCollect/delBatch - 删除店铺收藏
余额充值:POST /user/topUp/{amount} - 用户余额充值

# 店铺接口

店铺详情:GET /shop/selectById/{id} - 获取店铺详情

# 系统特色

# 京东UI完全仿真

品牌色彩:主色调采用京东红(#E1251B),辅助色为灰色系(#333, #666, #999)。
布局设计:首页三栏布局、商品列表网格布局、购物车列表布局,完全遵循京东官网。
交互动效:搜索框、按钮、商品卡片的hover和focus状态,都有精细的动画效果。
圆角间距:统一使用4px-8px的圆角,采用8px基础间距系统。
字体规范:14px为主要字号,12px为辅助信息,16px+用于标题。

# 现代化技术栈

Vue3 Composition API:采用最新的script setup语法,代码简洁高效。
Vite5构建工具:超快的热更新和构建速度,开发体验极佳。
TailwindCSS原子化CSS:快速构建UI,样式灵活可控。
Pinia状态管理:Vue3官方推荐,替代Vuex,更简洁易用。
Axios完整封装:请求/响应拦截器、自动添加Token、统一错误处理。

# 完整的电商购物流程

首页展示:轮播图、分类菜单、推荐商品、商品列表,信息丰富。
商品浏览:商品列表、商品详情、搜索、分类筛选,功能完善。
购物车管理:商品选择、数量调整、全选、批量删除、价格计算。
订单管理:订单创建、支付、取消、订单列表、订单详情。
收货地址:多地址管理,快速选择,提升购物效率。
商品收藏:收藏商品和店铺,自动记录浏览历史。

# 智能数据加载

骨架屏加载:首次加载显示骨架屏,避免白屏,提升用户体验。
无限滚动:商品列表滚动到底部,自动加载更多商品。
数据缓存:路由切换时缓存数据,再次进入无需重新加载。
错误处理:网络请求失败时显示错误提示和重试按钮。
加载状态:加载中、错误、空数据等多种状态的UI反馈。

# 响应式设计

移动端优先:320px-768px移动端适配,支持手机、平板。
平板适配:768px-1024px平板横竖屏适配。
桌面端:1024px+桌面端大屏适配。
弹性布局:使用Flexbox和Grid布局,自适应不同屏幕尺寸。

# 项目优势

# 1. 京东官网级UI设计

高度还原京东官网:从色彩、布局、交互到动效,完全遵循京东设计规范。
用户体验优秀:熟悉的操作方式,降低用户学习成本。
品牌识别度高:京东红品牌色,提升品牌认知度。

# 2. 现代化技术栈

Vue3最新特性:Composition API、script setup,代码简洁高效。
Vite5构建工具:开发环境启动快,热更新迅速,构建速度快。
TailwindCSS原子化CSS:快速构建UI,样式灵活可控,减少CSS文件体积。
Element Plus组件库:丰富的UI组件,开箱即用,提升开发效率。

# 3. 完整的电商功能

购物全流程:从商品浏览、加购、下单到支付、订单管理,流程完整。
用户体验优化:骨架屏加载、无限滚动、数据缓存、错误处理。
功能丰富:购物车、收货地址、商品收藏、浏览历史、订单管理。

# 4. 代码质量高

组件化开发:高度组件化,代码复用率高,易于维护。
TypeScript类型注解:虽然使用JavaScript,但API接口都有详细的JSDoc注释。
代码规范:统一的代码风格,易于团队协作。
完善的错误处理:网络请求、数据加载、用户操作都有完善的错误处理。

# 5. 易于扩展

清晰的目录结构:views、components、services、stores等目录划分清晰。
模块化API:API接口按模块划分(cart、product、user、login、shop)。
可配置性强:API代理、主题颜色、间距系统等都可配置。

# 6. 适用场景广泛

电商项目学习:完整的电商购物流程,适合学习电商业务逻辑。
Vue3项目参考:采用最新的Vue3技术栈,适合作为Vue3项目开发参考。
UI设计参考:京东官网级UI设计,适合作为电商UI设计参考。
二次开发:代码结构清晰,易于二次开发和功能扩展。

# 项目结构

uniapp_template_vue3/
├── src/
│   ├── assets/          # 静态资源
│   │   ├── login.png    # 登录页背景图
│   │   ├── logo.png     # 网站Logo
│   │   └── product.png  # 商品默认图
│   ├── components/      # 全局组件
│   │   ├── MyEditor.vue        # 富文本编辑器组件
│   │   ├── MyUpload.vue        # 文件上传组件
│   │   └── IndexSkeleton.vue   # 首页骨架屏组件
│   ├── router/          # 路由配置
│   │   └── index.js     # 主路由配置
│   ├── services/        # API接口
│   │   ├── index.js     # API接口统一导出
│   │   └── modules/     # API模块
│   │       ├── cart.js     # 购物车接口
│   │       ├── product.js  # 商品接口
│   │       ├── user.js     # 用户接口
│   │       ├── login.js    # 登录接口
│   │       └── shop.js     # 店铺接口
│   ├── stores/          # Pinia状态管理
│   │   └── user.js      # 用户状态管理
│   ├── styles/          # 全局样式
│   │   ├── common.css   # 公共样式
│   │   ├── front.css    # 前台样式
│   │   └── main.css     # 主样式入口
│   ├── utils/           # 工具函数
│   │   ├── http.js      # Axios封装和拦截器
│   │   └── tools.js     # 通用工具函数
│   ├── views/           # 页面组件
│   │   ├── common/      # 公共页面
│   │   │   └── 404.vue  # 404页面
│   │   ├── front/       # 前台页面
│   │   │   ├── Index.vue     # 首页
│   │   │   ├── cart.vue      # 购物车
│   │   │   ├── order.vue     # 订单页
│   │   │   ├── pdpInfo.vue   # 商品详情
│   │   │   ├── address.vue   # 地址管理
│   │   │   ├── brand.vue     # 品牌页
│   │   │   └── userInfo.vue  # 用户信息
│   │   ├── layout/      # 布局组件
│   │   │   └── ShopPageLayout.vue  # 商城页面布局
│   │   └── users/       # 用户相关页面
│   │       ├── Login.vue            # 登录弹窗
│   │       ├── Register.vue         # 注册页
│   │       ├── RetrievePassword.vue # 找回密码
│   │       └── EditPassword.vue     # 修改密码
│   ├── App.vue          # 根组件
│   └── main.js          # 应用入口
├── vite.config.js       # Vite配置
├── package.json         # 项目依赖配置
├── tailwind.config.js   # TailwindCSS配置
├── postcss.config.js    # PostCSS配置
└── jsconfig.json        # JS编译配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

# 开发说明

# 环境要求

Node.js 16+
npm/yarn/pnpm包管理器

# 安装依赖

npm install
# 或
yarn install
# 或
pnpm install

1
2
3
4
5

# 开发运行

# 开发环境(端口3000)
npm run dev

# 生产模式开发环境
npm run prod

1
2
3
4
5

# 构建打包

# 生产环境构建
npm run build-prod

1
2

# 预览构建结果

npm run preview