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

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

## 核心技术栈
- **框架**: [Vue 3](https://v3.vuejs.org/) (Composition API)
- **构建工具**: [Vite](https://vitejs.dev/) (v3)
- **路由**: [Vue Router](https://next.router.vuejs.org/) (v4)
- **UI 组件库**: [Vant](https://vant-contrib.gitee.io/vant/v4/) (v4)
- **网络请求**: [Axios](https://axios-http.com/) (自定义封装，支持 RSA/AES 加解密及验签机制)
- **CSS 预处理器**: SCSS + PostCSS
- **代码规范**: ESLint + Prettier + Husky + Commitlint

## 目录结构
```text
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`：
```bash
yarn install
```
或者使用 `npm`：
```bash
npm install
```

### 2. 本地开发运行

```bash
yarn dev
# 或
npm run dev
```

### 3. 测试环境打包

```bash
yarn build:stage
# 或
npm run build:stage
```

### 4. 生产环境打包

```bash
yarn build:prod
# 或
npm run build:prod
```

### 5. 代码检查与修复

```bash
# 检查
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`: 后端接口基础路径