101 lines
3.7 KiB
Markdown
101 lines
3.7 KiB
Markdown
# 智念移动端单页应用 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`: 后端接口基础路径
|