webapp-vue-frontend/README.md

智念移动端单页应用 Vue3 模板

项目简介

智念移动端单页应用（SPA）Vue3 模板，基于 Vite 构建，集成了 Vant 4 移动端 UI 组件库、Vue Router 4 以及自定义状态管理方案。该模板内置了移动端自适应、数据加密通信、自动化按需引入等核心功能，提供开箱即用的移动端 H5 开发体验。

核心技术栈

• 框架: Vue 3 (Composition API)
• 构建工具: Vite (v3)
• 路由: Vue Router (v4)
• UI 组件库: Vant (v4)
• 网络请求: Axios (自定义封装，支持 RSA/AES 加解密及验签机制)
• CSS 预处理器: SCSS + PostCSS
• 代码规范: ESLint + Prettier + Husky + Commitlint

目录结构

webapp-vue-frontend
├── public/                # 静态资源，不经过构建打包
├── src/
│   ├── assets/            # 静态资源 (SCSS 样式、字体等)
│   ├── common/            # 公共 JS 方法 (自适应 flexible、网络请求 ajax 等)
│   ├── components/        # 全局公共组件
│   ├── hooks/             # Vue3 Composition API hooks
│   ├── router/            # 路由配置
│   ├── store/             # 状态管理中心 (基于 Vue3 reactive 自定义实现)
│   ├── views/             # 页面视图组件
│   ├── App.vue            # 根组件
│   └── main.js            # 项目入口文件
├── .env.*                 # 多环境变量配置文件 (development/staging/production)
├── vite.config.js         # Vite 构建配置文件
└── package.json           # 项目依赖与命令脚本

核心特性

1. 移动端自适应: 采用 lib-flexible 结合 postcss-pxtorem 实现自动将 px 转换为 rem，智能适配不同移动设备屏幕尺寸。
2. 自动化导入:
   • 借助 unplugin-vue-components 自动按需引入 Vant 组件，有效减少打包体积。
   • 借助 unplugin-auto-import 自动引入 vue 和 vue-router 等核心 API，无需在组件内手动 import。
3. 数据加密通信: 在 src/common/ajax.js 中对 Axios 进行了深度封装，支持基于 RSA 与 AES 的参数加解密，并内置签名 (Sign) 生成算法，保障前后端数据传输安全。
4. 移动端调试: 在开发或测试环境通过 vite-plugin-vconsole 注入 vConsole 面板，方便在移动端真机进行调试。
5. 代码规范检查: 结合 Husky + Commitlint 在代码提交前对 Git Commit Message 进行规范校验，同时集成 ESLint & Prettier 进行代码格式化。
6. 兼容性处理: 引入 @vitejs/plugin-legacy 以兼容传统浏览器不支持 ESM 的情况。

快速开始

1. 安装依赖

推荐使用 yarn：

yarn install

或者使用 npm：

npm install

2. 本地开发运行

yarn dev
# 或
npm run dev

3. 测试环境打包

yarn build:stage
# 或
npm run build:stage

4. 生产环境打包

yarn build:prod
# 或
npm run build:prod

5. 代码检查与修复

# 检查
yarn lint

# 检查并自动修复
yarn lint:fix

环境变量说明

• .env.development: 本地开发环境变量配置。
• .env.staging: 测试/预发布环境变量配置。
• .env.production: 生产环境变量配置。

部分核心变量（根据各环境配置）:

• VITE_ENV: 当前环境标识 (development/staging/production)
• VITE_CONSOLE: vConsole 调试面板开关 (1 开启, 0 关闭)
• VITE_ENCRYPTION: 接口请求参数是否开启加密的开关控制
• VITE_BASE_API: 后端接口基础路径