%20(2).svg)
项目简介
本项目是一个基于 Vue3、Vite、Quark Design、Sass、Viewport 适配方案以及 Axios 封装的移动端模板脚手架，为开发者提供快速构建移动端应用的解决方案，能降低开发成本并提高开发效率。
项目的主要特性和功能
- 基于 Vue3 和 Vite，利用 Vue3 响应式特性与 Vite 快速开发体验，提供高效开发环境。
- 采用 Quark Design 组件库，有丰富 UI 组件，便于快速构建应用。
- 使用 Sass 预处理器编写样式，提升样式开发效率与可维护性。
- 通过
postcss-px-to-viewport-8-plugin插件实现 Viewport 适配，确保不同设备显示效果良好。 - 对 Axios 封装，方便处理请求和响应，有接口管理功能，便于管理不同模块接口。
- 使用 Pinia 进行状态管理，提供便捷 API 操作状态。
- 采用 Hash 模式进行 Vue Router 配置，开发者可按需修改模式和基础路径。
- 通过 npm 脚本配置不同环境变量，方便在不同环境运行项目。
- 内置 Eslint + Prettier + Stylelint 规则，统一开发规范，提高代码质量和协作性。
安装使用步骤
假设用户已下载本项目的源码文件。
1. 安装依赖：进入项目目录，使用 npm 安装项目依赖。
bash
npm install
2. 启动项目：运行以下命令启动项目。
bash
npm run dev
3. 编写代码：根据项目需求编写代码，利用 Vue3、Vite、Quark Design、Sass 等特性开发。
4. 运行测试：通过运行以下命令进行项目测试。
bash
npm run dev:test
5. 构建生产环境：运行以下命令构建生产环境代码。
bash
npm run build
配置多环境变量
通过 package.json 中的 scripts 配置不同环境变量，使用 --mode 参数执行不同环境：
- 本地环境：npm run dev
- 测试环境：npm run dev:test
- 生产环境：npm run dev:prod
Viewport 适配方案
项目已配置好 Viewport 适配，无需额外配置。如需修改适配规则，可修改 postcss.config.js 文件。
Quark Design 组件按需加载
通过以下命令安装 Quark Design 组件库，并在项目中按需引入使用。
bash
npm i quarkd
Pinia 状态管理
使用 Pinia 进行状态管理，状态管理模块位于 store 目录下。
Vue Router 配置
采用 Hash 模式进行路由配置，开发者可按需修改 mode 和 base 配置，路由配置文件位于 src/router 目录下。
Axios 封装及接口管理
在 utils/request.js 文件中对 Axios 进行封装，根据后台接口做相应修改，接口管理模块位于 src/api 目录下。
Vite 基础配置
根据项目需求配置 Vite 的基础配置，包括服务器配置、插件配置等，配置文件位于 vite.config.ts。
配置 Alias 别名
在 Vite 的配置文件 vite.config.ts 中配置 Alias 别名，方便引入模块。
配置 Proxy 跨域
在 Vite 的配置文件 vite.config.ts 中配置 Proxy 跨域，解决开发环境下的跨域问题。
Eslint + Prettier + Stylelint 统一开发规范
根目录下的 .eslintrc.js、.stylelint.config.js、.prettier.config.js 文件内置了 lint 规则，统一团队代码风格和规范。
下载地址
点击下载 【提取码: 4003】【解压密码: www.makuang.net】