SpringBoot3 + Vue3 + 微信小程序如何学习，以及学哪些技术，组件

整体说明：

​ SpringBoot3：后端服务，提供 RESTful 接口，对接微信开放平台、操作数据库、鉴权、支付、文件存储

​ Vue3 + Vite：PC 运营管理后台（管理员操作）

​ 微信小程序（原生 /uni-app）：用户移动端，共用同一套后端接口

后端 SpringBoot3 技术栈

1.基础信息 java17：类、接口、泛型、Stream、函数式、异常、IOMaven：SpringBoot3推荐MavenMySQL8.0+：CRUD、联表查询、索引、事务、分页SQL工具：NavicatHTTP基础、JSON、接口请求调试（ApiPost/Postman）2.核心框架/核心组件 （1）SpringBoot3.xSpringMVC6：接收小程序/Vue前端请求、统一接口封装 配置文件 application.yml （2）ORM持久层MyBatis-Plus3.5.x：CRUD、分页、条件构造器、逻辑删除Druid1.2.x 连接池：监控、防SQL注入 （3）工具类/简化开发Lombok：@Data、@Slf4j、简化实体Hutool：微信接口调用、加密、日期、文件、HTTP请求Validation：参数校验（@NotBlank、@Pattern等）全局校验异常处理 （4）接口文档：Knife4j4.x （5）鉴权登录JWT（jjwt0.11.5+）：无状态 token，小程序本地存储 token 请求接口Sa-Token（轻量化认证授权框架）、SpringSecurity6（重型企业级全栈安全框架)（6）跨域处理@CrossOrigin、全局CORS配置，解决Vue、小程序跨域报错 （7）Redis（必学缓存中间件）SpringDataRedis3.x 用途：缓存用户信息、token 黑名单、验证码、热点商品、分布式锁 （8）微信小程序专用依赖（核心）WxJava工具包：封装小程序登录、订阅消息、微信支付V3code2session 解密 openid、session_key 获取用户手机号、头像昵称 微信支付V3回调处理、退款、订单 （9）文件存储MinIO/阿里云OSS：小程序、Vue后台上传图片 （10）日志/全局处理Logback（SpringBoot3默认日志） 全局异常处理器、统一返回结果Result<T>（11）进阶中间件（可选，项目上线用）RabbitMQ：异步订单、消息推送XXL-Job：定时任务

后端常用功能模块（实战必须做）

1. PC 管理员账号登录（账号密码 + JWT）
2. 小程序微信一键登录（code 换取 openid）
3. 用户权限区分：管理员 / 小程序普通用户
4. 商品 / 分类 / 订单 CRUD、分页、条件筛选
5. 文件图片上传、图片预览
6. 微信支付、支付回调、订单状态更新
7. 小程序订阅消息推送
8. 数据统计接口（给 Vue 后台图表使用）

PC 管理前端：Vue3 + Vite

1.前置基础 HTML + CSS + ES6/ES7（Promise、async/await、解构、模块化） 2.核心技术/组件库 （1）构建工具：Vite（比 webpack 快，Vue3 标配） （2）Vue3核心API Composition API：setup、ref、reactive、computed、watch 生命周期、自定义组件、props、emit （3）路由：Vue Router 4 路由守卫（未登录拦截、权限路由） 动态菜单（后端返回权限菜单渲染侧边栏） （4）状态管理：Pinia（Vue3 官方推荐，替代 Vuex） 存储登录 token、用户信息、角色权限 （5）请求库：Axios 请求拦截统一携带 token 响应拦截统一处理错误码、弹窗提示 （6）UI 组件库：Element Plus（Vue3 主流后台 UI） 高频组件：Table 表格、Pagination 分页、Form 表单、Dialog 弹窗、Upload 上传、Select 下拉、Tree 树形菜单、Message 弹窗提示 （7）辅助组件/工具 ECharts：后台数据可视化图表（销量、用户统计） WangEditor/TinyMCE：富文本编辑器（商品详情） xlsx：Excel 导入导出 dayjs：日期格式化

Vue 后台标准页面

登录页、首页仪表盘、商品管理、订单管理、用户管理、分类管理、上传图片、数据统计、角色权限管理

微信小程序

（一）原生微信小程序（纯小程序语法，轻量）

1. 基础语法 WXML（标签）、WXSS（样式）、JS、页面 json 配置 Page 页面生命周期、Component 组件生命周期 2. 核心API wx.request：网络请求，封装统一请求携带 token 调用 SpringBoot3 接口 wx.login：获取 code 传给后端换取 openid wx.uploadFile：上传图片到后端 OSS wx.requestPayment：调起微信支付 wx.setStorageSync/wx.getStorageSync：本地缓存 token 交互：wx.showToast、wx.showModal、wx.showLoading 3. UI 组件库：Vant Weapp（原生小程序最佳 UI） 常用：轮播、商品卡片、下拉筛选、弹窗、表单、分页、标签栏 4. 优化技术 分包加载、图片懒加载、自定义 tabbar

（二）uni-app（推荐！复用 Vue3 语法，一套多端）

1. 开发工具：HBuilderX 2. 优势：完全 Vue3 语法，一套代码编译微信小程序 / H5/App，学习成本低 3. UI 库：uView UI（uni-app 生态最强组件库） 4. 语法复用：直接使用 Vue3 的 ref、import、async/await，不用重新学小程序原生语法

小程序通用页面（商城示例）

首页轮播、商品列表、商品详情、购物车、订单结算、我的页面、地址管理