项目简介
本项目是一个基于Vite
、Vue3
和TypeScript
的现代前端开发模板。它提供了众多开箱即用的功能,能帮助开发者快速搭建现代化前端项目,减少配置时间,提高开发效率。
项目的主要特性和功能
- 构建与框架:使用Vite作为构建工具,带来快速开发体验;采用Vue3进行前端开发,支持最新特性。
- 路由与布局:基于文件系统的路由配置,简化路由管理;支持默认布局和自定义布局,满足不同页面需求。
- Mock与API引入:内置Mock服务,便于前后端分离开发;自动引入Vue、Pinia、VueUse等API,减少手动引入。
- 组件与图标:支持组件和图标的自动引入,提升开发效率。
- 实用库集成:集成VueUse库,提供丰富实用函数和hooks;使用Windi CSS作为原子CSS库,实现快速样式开发。
- 模式与请求管理:支持暗黑模式;集成SWR请求库,提供高效请求管理和缓存机制。
- 状态管理与包管理:使用Pinia进行状态管理,简化流程;推荐使用pnpm进行依赖管理,安装速度快。
- 其他特性:集成NProgress提供页面跳转进度条;支持Vite的Inspect插件,方便调试;支持插件自动加载;集成Vitest进行单元测试;支持Markdown文件渲染;支持
~
路径别名;提供命令行工具自动创建和删除文件;支持国际化;提供美观的404页面;支持tsx文件;生产环境支持gzip资源压缩。
安装使用步骤
假设用户已经下载了本项目的源码文件,可按以下步骤操作:
1. 安装依赖
shell
pnpm install
2. 启动开发服务器
shell
pnpm dev
3. 预览构建结果
shell
pnpm preview
4. 打包项目
shell
pnpm build
5. 运行单元测试
shell
pnpm test
6. 生成单元测试覆盖率报告
shell
pnpm coverage
7. 生成样式分析报告
shell
pnpm analysis
8. 类型检查
shell
pnpm typecheck
9. 自动创建文件
shell
pnpm auto:create
10. 自动删除文件
shell
pnpm auto:remove
下载地址
点击下载 【提取码: 4003】【解压密码: www.makuang.net】