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