Vite Standard Template
这是一个基于Vite4.X + Vue3.X + TypeScript + Naive UI + Pinia + VueRouter + Unocss + Alova + Eslint + Prettier + husky + lint-staged + commitlint + commitizen + cz-customizable+ conventional-changelog构建的标准的vue项目模板。整个项目包依赖采用pnpm进行依赖管理，Node版本为16.17.0, 同时也集成了项目中常用的插件，包含组件自动导入API
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插件用于压缩项目打包文件，进一步提升网站的加载速度和性能。
- Vite
Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects
- Vue
Vue.js is a lightweight and flexible JavaScript framework that allows developers to easily build dynamic and reactive user interfaces. Its intuitive syntax, modular architecture, and focus on performance make it a popular choice for modern web development.
- UnoCSS
UnoCSS is an instant, on-demand atomic CSS engine that generates utility classes at build time. It's highly customizable, extremely fast, and compatible with Tailwind CSS utilities while offering additional features like attributify mode and pure CSS icons.
- Eslint
ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.
- Pinia
Pinia is the official state management library for Vue.js. It provides a simple and intuitive API with full TypeScript support, devtools integration, and modular design. Pinia replaces Vuex as the recommended state management solution for Vue 3.
- Typescript
TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.