%20(2).svg)
项目简介
这是一个基于Vue3、Vite、TypeScript和多种现代前端技术构建的开箱即用的移动端项目基础模板。包含Vue3、Vant4组件库、Tailwindcss原子类框架等特性与功能，配备诸多开发工具和实用插件，是全栈开发的友好环境，可快速启动并开发复杂的单页面应用。
项目的主要特性和功能
- 使用最新的Vue3版本和Vite构建工具，实现更快热更新与更高开发效率。
- 采用TypeScript，使代码更健壮、易维护。
- 运用流行的Vant4组件库，提供丰富移动端UI组件。
- 借助Tailwindcss原子类框架，通过实用类快速构建UI。
- 利用Pinia进行状态管理，使应用状态更清晰、易管理。
- 支持深色模式，满足不同用户视觉需求。
- 使用Vue-router 4进行路由管理。
- 支持SVG图标自动注册组件，方便图标管理与使用。
- 通过vw单位实现视口适配，适配不同屏幕尺寸，保证良好用户体验。
- 对Axios进行封装，便于网络请求。
- 对打包资源进行gzip压缩，优化生产环境性能。
- 开发环境支持Mock数据，方便开发与测试。
- 利用ESLint进行代码质量检查，保证代码规范。
- 具备首屏加载动画，提升用户体验。
- 开发环境有调试面板，便于开发调试。
安装使用步骤
假设用户已经下载了本项目的源码文件：
1. 安装依赖：在项目根目录下运行pnpm install命令安装依赖。
2. 启动项目：在项目根目录下运行pnpm dev命令启动开发服务器。
文档引导
- 按需引入vant组件：使用
unplugin-vue-components插件按需自动引入组件。 - SVG图标使用：将SVG图标文件放指定目录，组件中用
<svg-icon name="svg图标文件命名" />使用。 - 路由缓存与命名：组件默认开启缓存，关闭缓存可在对应路由的
meta内设置noCache为true，组件name值和对应路由name需完全相同。 - 调试面板eruda：开发环境引入eruda调试面板cdn，不需要可在
.env.development文件修改。 - 动态设置页面标题：在路由全局前置守卫中设置。
- 开发环境Mock：开发环境支持mock请求数据，在
mock目录配置接口和数据。 - 视口适配：用
cnjm-postcss-px-to-viewport进行视口适配。 - Tailwindcss原子类框架：可通过其首页示例快速构建UI。
- Git提交信息规范：用
husky规范Git提交信息，遵循Angular规范。 - CDN生产环境依赖（TODO）：生产环境默认CDN加载依赖，依赖加载源见根目录
dependencies-cdn.js文件，确保生产和开发环境依赖版本一致，关闭CDN依赖可在根目录生产环境变量文件修改。
下载地址
点击下载 【提取码: 4003】【解压密码: www.makuang.net】