Overview

在多人协作开发的环境中，确立和遵循项目开发规范极为重要。这不仅能够统一代码风格，还能增强后期维护的便利性。最近，随着使用 Vite 搭建 Vue3 项目，我意识到在集成 ESLint 校验规范时常常遇到各种各样的问题。为了解决这些困扰，我投入时间研究并创建了一个包含了常用开发插件和最佳实践的标准项目模板。这个模板整合了 Vite4.X、Vue3.X、TypeScript 及其他多种工具，旨在帮助开发者们高效地创建和维护项目。

此模板的设计充分考虑了代码规范及团队协作的需求，让开发者能够少花时间在基础配置上，专注于开发工作。通过这个规范化的项目结构，所有团队成员都能在同一标准下工作，提升了协作效率。

Features

• 自动导入API: 采用 unplugin-auto-import 插件，无需手动导入常用API，如 ref 和 reactive，提升了开发效率。
• 组件自动导入: 通过 unplugin-vue-components 实现组件的自动导入，减少手动引入的繁琐步骤，让项目结构更简洁。
• 自定义组件命名: 使用 unplugin-vue-setup-extend-plus 可以在 <script setup> 中自定义组件名称，提高代码的可读性和维护性。
• 动态HTML注入: 利用 vite-plugin-html 插件，可以在 HTML 中使用 EJS 语法高效地注入变量，便于数据动态变化。
• SVG图标合并: vite-plugin-svg-icons 插件生成 SVG 雪碧图，只需一次配置，即可减少 DOM 操作，性能更优。
• 丰富的图标支持: @iconify/vue 允许使用超过 70,000 个图标的统一框架，支持在线和离线使用，极大丰富了图标选择。
• 构建性能优化: rollup-plugin-visualizer 插件可生成可视化的构建报告，帮助开发者分析和优化项目的打包性能。
• 压缩打包工具: vite-plugin-compression 插件用于压缩项目打包文件，进一步提升网站的加载速度和性能。