【源码】基于 Vite 和 Vue3 的现代前端开发模板

项目简介

本项目是一个基于 Vite + Vue3 + TypeScript 的现代前端开发模板。它集成了众多主流插件，整合繁杂配置，为开发者提供开箱即用的现代开发架构，节省项目配置时间，有效提高开发效率。

构建与框架：采用 Vite 作为构建工具，使用 Vue3 框架，支持用 TypeScript 直接编写代码。
路由与布局：具备文件路由功能，目录结构即路由；有布局系统，可设置默认和非默认布局。
模拟与请求：支持 Mock 数据，方便开发调试；提供 SWR 请求支持，用 vue-request 库处理请求。
自动引入：实现 Api、组件、图标自动引入，减少手动引入代码工作量。
状态管理：使用 pinia 进行状态管理，简单且对 TypeScript 支持良好。
样式处理：采用 Windi CSS 原子 CSS 库，支持暗黑模式、属性化模式、可视化分析器和预设排版插件。
其他特性：支持 VueUse 库、跳转进度条、Inspect 调试、插件自动加载、Vitest 单元测试、Markdown 渲染、路径别名 ~、命令行自动创建与删除、i18n 国际化、漂亮的 404 页、tsx 以及 gzip 资源压缩。

建议使用 node 当前的长期维护版本 v16，且版本大于 v16.13.1。

该模板不限定包管理器，推荐使用 pnpm，安装命令如下： shell pnpm install 也可使用 npm 或 yarn： shell npm install shell yarn

普通预览： shell pnpm preview shell npm run preview shell yarn preview
开启 host： shell pnpm preview:host shell npm run preview:host shell yarn preview:host
自动打开浏览器： shell pnpm preview:open shell npm run preview:open shell yarn preview:open

shell pnpm build shell npm run build shell yarn build

单元测试： shell pnpm test shell npm run test shell yarn test
单元测试报告生成： shell pnpm coverage shell npm run coverage shell yarn coverage
样式报告预览： shell pnpm analysis shell npm run analysis shell yarn analysis
样式报告打包： shell pnpm analysis:build shell npm run analysis:build shell yarn analysis:build
类型检查： shell pnpm typecheck shell npm run typecheck shell yarn typecheck
自动创建： shell pnpm auto:create shell npm run auto:create shell yarn auto:create
自动移除： shell pnpm auto:remove shell npm run auto:remove shell yarn auto:remove
依赖更新： shell pnpm deps:fresh shell pnpm deps:fresh:major shell pnpm deps:fresh:minor shell pnpm deps:fresh:patch 执行以上依赖更新命令后，需重新执行包安装命令： shell pnpm i shell npm i shell yarn

点击下载 【提取码: 4003】【解压密码: www.makuang.net】