一、项目介绍
本项目为SPA单页应用，Hybrid App项目，采用 Vue3 作为前端框架，搭配 Vite 构建工具，运用 JSBridge 框架实现与 APP 的交互。
二、环境
1、Node.js：v23.11.0
2、npm：10.9.2
三、技术架构
1、前端框架：Vue3
- Vue3：作为核心框架，提供响应式编程模型，采用组合式 API 提升代码复用性与可读性，高效地构建用户界面。
2、构建工具：Vite
- Vite：具有极速的冷启动与热更新能力，显著提升开发效率，为项目快速搭建开发服务器，并优化资源加载。
3、日志工具：Vconsole
- Vconsole：在移动端调试时，将日志信息输出到移动端页面上的控制台面板，便于开发者查看运行时日志，快速定位问题。
4、状态管理：Pinia
- Pinia：状态管理库，以模块化的形式管理应用状态，提供更简洁的 API，便于在组件间共享与管理状态。
5、路由管理：Vue Router
- Vue - router：专为 Vue3 设计的路由管理器，负责管理应用的路由跳转、页面切换，支持动态路由、嵌套路由等复杂路由场景。
6、网络请求：Axios
- Axios：基于 Promise 的 HTTP 库，用于与后端 API 进行通信，支持请求与响应拦截，可统一处理请求头、超时等配置，方便进行数据请求与错误处理。
7、UI 框架：Vant
- Vant4：轻量、可定制的移动端组件库，涵盖丰富的移动端 UI 组件，如按钮、弹窗、列表等，与 Vue3 紧密集成，便捷地搭建美观的页面。
8、代码规范：ESLint
- Eslint：检测 JavaScript 代码中的潜在错误与不良风格，依据项目定制的规则，保证代码质量与团队代码风格一致性。
9、代码格式化：Prettier
- Prettier：自动格式化代码，依据统一的规则对代码进行排版，减少团队成员间的代码风格差异，提升代码可读性。
10、样式预处理器：Sass
- Sass ：赋予 CSS 更强的变量、混合、函数等特性，实现样式的高效复用与灵活管理，便于统一管理项目中的样式变量与样式逻辑。
11、环境配置：Dotenv
- Dotenv：用于加载环境变量文件（.env），方便在不同环境（开发、测试、生产）下配置不同的参数，如 API 地址、密钥等，增强项目的可配置性与安全性。
11、CSS兼容性配置：Postcss
- Postcss：配合 autoprefixer 插件等，自动为 CSS 添加浏览器兼容性前缀，确保项目在各主流浏览器上的样式显示正常，解决浏览器兼容性问题。
12、水印配置：Watermark-dom
- Watermark-dom：用于在页面上添加水印，提高页面内容的安全性，防止页面被复制或篡改。
四、前端架构图 & webView秒开时序图
前端架构图.png
五、项目结构
├── src # 源代码目录
│ ├── assets # 静态资源
│ │ ├── fonts # 字体文件
│ │ └── images # 图片资源
│ ├── components # 公共组件(Vue组件)
│ ├── request # 网络请求封装(Axios)
│ │ ├── config.js # API接口配置
│ │ ├── index.js # Axios实例
│ │ └── userService.js # 用户相关接口
│ ├── router # 路由配置(Vue Router)
│ │ └── index.js # 路由定义
│ ├── stores # Pinia状态管理
│ │ ├── index.js # Pinia实例
│ │ └── user.js # 用户状态
│ ├── styles # 全局样式(Sass)
│ ├── utils # 工具函数
│ │ ├── colorGradient.js # 颜色渐变工具
│ │ ├── device.js # 设备检测工具
│ │ ├── encrypt.js # 加密工具
│ │ ├── format.js # 格式化工具
│ │ ├── publicMethod.js # 公共方法
│ │ ├── storage.js # 本地存储工具
│ │ └── validate.js # 验证工具
│ └── views # 页面组件
│ └── NotFound.vue # 404页面
├── public # 公共资源目录
│ └── vite.svg # 网站图标
├── .env.dev # 开发环境变量
├── .env.pr # 生产环境变量
├── .env.sit # 测试环境变量
├── .env.uat # 预发布环境变量
├── .eslintrc.js # ESLint配置
├── .prettierrc # Prettier配置
├── postcss.config.js # PostCSS配置
├── vite.config.js # Vite构建配置
├── package.json # 项目依赖配置
└── package-lock.json # 依赖锁文件
