基于 Vue 3 + Vite 的移动端项目模板，集成了常用的移动端开发工具和最佳实践

# Vue 3 Mobile Template 基于 Vue 3 + Vite 的移动端项目模板，集成了常用的移动端开发工具和最佳实践。 ## 技术栈 - 构建工具：[Vite](https://vitejs.dev/) - UI 框架：[Vant](https://vant-ui.github.io/vant/#/zh-CN) - 路由管理：[Vue Router](https://router.vuejs.org/) - 状态管理：[Pinia](https://pinia.vuejs.org/) - HTTP 请求：[Axios](https://axios-http.com/) - 移动端适配：[postcss-px-to-viewport](https://github.com/evrone/postcss-px-to-viewport) - CSS 预处理器：[Sass](https://sass-lang.com/) ## 项目结构 ```bash src/ ├── api/ # API 接口 ├── assets/ # 静态资源 │ ├── icons/ # 图标 │ └── images/ # 图片 ├── components/ # 公共组件 ├── hooks/ # 自定义 hooks ├── layouts/ # 布局组件 ├── router/ # 路由配置 ├── store/ # 状态管理 │ └── modules/ # 状态模块 ├── styles/ # 样式文件 ├── utils/ # 工具函数 └── views/ # 页面组件 ``` ## 开发环境要求 - Node.js >= 18.19.0 - npm >= 6.x ## 快速开始 1. 克隆项目 ```bash git clone [repository-url] cd vue3-frame ``` 2. 安装依赖 ```bash npm install ``` 3. 启动开发服务器 ```bash npm run dev ``` 4. 构建生产版本 ```bash npm run build ``` ## 主要功能 - 移动端适配 - 使用 postcss-px-to-viewport 实现移动端适配 - 基于 375px 设计稿进行开发 - UI 组件 - 集成 Vant UI 组件库 - 按需引入组件，减小打包体积 - 状态管理 - 使用 Pinia 进行状态管理 - 模块化的状态管理方案 - 路由配置 - 基于 Vue Router 4.x - 支持路由懒加载 - 内置路由守卫 - 请求封装 - 基于 Axios 的请求封装 - 统一的错误处理 - 请求拦截和响应拦截 - 开发规范 - ESLint + Prettier 代码规范 - Git Commit 规范 - 统一的项目结构 ## 开发指南 ### 新增页面 1. 在 `views` 目录下创建页面组件 2. 在 `router` 中添加路由配置 3. 在 `store/modules` 中添加对应的状态管理模块（如需要） ### 样式开发 - 全局样式在 `styles` 目录下管理 - 组件样式使用 scoped 作用域 - 使用 SCSS 变量统一管理主题 ### API 开发 - 在 `api` 目录下按模块组织 API - 使用 `utils/request.js` 中的 axios 实例 - 统一处理接口响应和错误 ## 部署 1. 构建生产版本 ```bash npm run build ``` 2. 预览构建结果 ```bash npm run preview ``` ## 注意事项 1. 移动端适配 - 开发时使用 px 单位，构建时会自动转换为 vw - 部分不需要转换的样式可以使用 `ignore` 类名 2. 性能优化 - 路由懒加载 - 组件按需引入 - 图片资源优化 3. 开发规范 - 遵循 Vue 3 组合式 API 风格 - 使用 TypeScript 编写核心逻辑 - 保持代码整洁和注释完整 ## License [MIT](LICENSE)