梳理vite构建vue项目可选的配置和组件

💡 列举通过vite构建vue3项目时可能会使用到的配置和组件，在搭建项目初期可以提前规划，提高开发效率，后续会不断扩展…

unplugin-vue-router

可以监听views文件夹中的文件变化，自动配置路由信息，目录结构即路由。通常layouts文件会存放项目页面布局组件，例如导航栏、侧边栏、页脚等，可以在router的meta属性中设置页面的布局组件。

vite-plugin-vue-meta-layouts

会根据名称自动为路由配置布局。

vite-plugin-mock

用于模拟接口请求。

vite-plugin-vue-devtools

适用于vite构建的vue3项目的开发工具，支持查看组件状态、性能分析、事件追踪。并且该工具与HMR无缝集成，可以实时更新。

vite-plugin-use-modules

自动引入常用modules，减少频繁手动import工具库，按需加载。缺点是引入是一次性的，加载是按需的，可能会引入不必要的模块，不易追踪，增加调试难度。

vite-plugin-compression

使用gzip对指定资源进行压缩，通常在生产环境使用。

vite-plugin-env-types

自动生成环境变量类型声明，根目录下的 .env 用来对项目进行环境变量配置。

vite-plugin-removelog

生产环境下console的日志会被自动去掉。

vitejs/plugin-react

支持在vue文件中使用tsx组件。

unplugin-auto-import

可自动导入常用模块和Api（按需），也支持第三方库配置自动导入，不用每个页面使用前手动import。

unplugin-vue-components

可自动引入自定义组件和第三方组件，如：element-plus、vant等，在vite配置文件配置即可在vue文件中按需引入使用（如果需要全局配置语言等，还是需要在main.ts 中设置）。

unplugin-vue-markdown

支持在页面渲染markdown，以及在markdown中嵌入vue组件。

Icons preset

图标预设，自动引入图标

https://icones.netlify.app/

https://unocss.dev/presets/icons

WindiCSS、UnoCSS、 Tailwind CSS

Css工具库，通过简单的类名来控制元素的样式，减少书写大量重复CSS代码。

Tailwind CSS的核心思想是实用类优先，每个小样式定义为一个类名，可以通过叠加实现复杂样式，减少样式冲突和冗余。UnoCSS是WindiCSS的精神传承，实现方式跟Tailwind CSS类似，核心思想是按需生成和极致的优化，社区尚在发展。

在构建速度和最终css大小方面，UnoCSS的按需生成机制更加有优势，Tailwind CSS需要开启JIT和purge后才会进行tree-shaking，减少最终Css大小，否则会将所有可能用到的类名都编译。

VueUse

提供一系列基于vue的hooks，开箱即用，例如：窗口大小监听、鼠标位置防抖、设备传感器、网络相关、状态管理等方法。

vue-echarts

为vue定制的echarts封装组件，使得echarts携带了生命周期、响应式以及vue指令。

Pinia和VueX状态管理工具

Pinia是Vuex的轻量级替代方案，适用于vue3和composition API，适用于中小型项目。

VueX集中管理全局状态，适用于中大型项目。

npm、yarn、pnpm

包管理器。

NProgress

设置跳转进度条。

vitest

单元测试，与Jest相似。

配置路径别名@

// vite.config.js
import { defineConfig } from 'vite';
import path from 'path';

export default defineConfig({
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
      '@components': path.resolve(__dirname, './src/components'),
      '@utils': path.resolve(__dirname, './src/utils'),
      '@assets': path.resolve(__dirname, './src/assets'),
      '@store': path.resolve(__dirname, './src/store'),
    },
  },
});