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

项目简介

本项目是一个基于Vite和Vue3，搭配TypeScript的开箱即用现代开发模板。它整合了众多主流插件与工具，涵盖文件路由、布局系统、Mock支持等功能，为开发者提供一站式解决方案，节省项目配置时间，提升开发效率。

项目的主要特性和功能

1. 构建与框架：采用Vite作为构建工具，使用Vue3框架，支持TypeScript。
2. 路由与布局：具备文件路由，目录结构即路由；拥有布局系统，支持默认布局与非默认布局。
3. 数据模拟与请求：支持Mock数据，可在开发阶段模拟接口请求；提供SWR请求支持，使用vue - request库简化请求操作。
4. 自动引入：实现Api、组件、图标自动引入，提高开发效率。
5. 状态管理：使用pinia进行状态管理，比vuex更简单且TS支持更好。
6. 样式处理：采用Windi CSS原子CSS库，支持暗黑模式、属性化模式、可视化分析器。
7. 其他功能：支持VueUse、Markdown渲染、路径别名~、命令行自动创建与删除、i18n国际化、漂亮的404页、tsx、gzip资源压缩、环境变量配置、统一代码规范与风格、生产环境自动移除开发日志、defineOptions。

安装使用步骤

前提条件

确保已下载本项目的源码文件，推荐使用node当前的长期维护版本v16，大于v16.13.1即可。

操作步骤

1. 安装依赖：该模板不限定包管理器，可使用pnpm、npm或yarn。强烈推荐使用pnpm，安装依赖命令如下： shell pnpm install

2. 开发：运行以下命令开启开发环境，可选择开启host或自动打开浏览器： ```shell pnpm dev

   pnpm dev:host

   pnpm dev:open 3. **预览**：运行以下命令进行预览，同样可选择开启host或自动打开浏览器：shell pnpm preview

   pnpm preview:host

   pnpm preview:open 4. **打包**：运行以下命令进行项目打包：shell pnpm build 5. **单元测试**：运行以下命令进行单元测试或生成单元测试报告：shell pnpm test

   pnpm coverage 6. **样式报告**：运行以下命令进行样式报告预览或打包：shell pnpm analysis

   pnpm analysis:build 7. **类型检查**：运行以下命令进行类型检查：shell pnpm typecheck 8. **自动创建与移除**：运行以下命令进行页面或组件的自动创建与删除：shell pnpm auto:create

   pnpm auto:remove 9. **依赖更新**：运行以下命令进行依赖更新，更新后需重新执行包安装命令：shell pnpm deps:fresh

   pnpm deps:fresh:major

   pnpm deps:fresh:minor

   pnpm deps:fresh:patch

   pnpm i 10. **代码规范校验**：运行以下命令进行代码规范校验，可选择在校验时修复：shell pnpm lint

   pnpm lint:fix ```

下载地址

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