--- theme: vue-pro highlight: nord --- > **这是我参与8月更文挑战的第2天，活动详情查看：[8月更文挑战](https://juejin.cn/post/6987962113788493831 "https://juejin.cn/post/6987962113788493831")** 项目在使用了一段时间`vite`后,也用过或尝试过一些好用的插件,在这里也算总结和分享一下这些插件,希望也能对你有帮助. ## [vite-plugin-eslint](https://github.com/gxmari007/vite-plugin-eslint) vite的eslint插件,可是一个常见的插件,让你的项目可以方便的得到eslint支持,完成eslint配置后,可以快速的将其集成进vite之中,便于在代码不符合eslint规范的第一时间看到提示. ```typescript import { defineConfig } from 'vite'; import eslintPlugin from 'vite-plugin-eslint'; export default defineConfig({ plugins: [eslintPlugin()], }); ``` ## [@nabla/vite-plugin-eslint](https://github.com/fi3ework/vite-plugin-checker) 这是基于上面的vite-plugineslint修改的一个插件,特点是支持异步检测可以加速项目的启动速度,不过缺点也是如果有错误或者警告不会提前停止项目编译. ```typescript import { defineConfig } from "vite"; import eslintPlugin from "@nabla/vite-plugin-eslint"; export default defineConfig({ plugins: [eslintPlugin()], }); ``` ## [vite-plugin-checker](https://github.com/fi3ework/vite-plugin-checker) `vite-plugin-checker`也是检测插件,不过他的支持也相对广泛,支持`typeScript`,`vls`,`vue-tsc`,`eslint`多种方式,不过还是感觉`eslint`更全面一些,不过我在使用中会出现刷新浏览器后不提示的问题. ```typescript import checker from 'vite-plugin-checker' export default { plugins: [checker({ typescript: true })] } ``` ## [@vitejs/plugin-vue-jsx](https://github.com/vitejs/vite/tree/main/packages/plugin-vue-jsx#readme) 常用插件,vite对`jsx/tsx`语法支持插件,配置后vue单文件中即可支持`jsx/tsx`语法. ```typescript import vueJsx from '@vitejs/plugin-vue-jsx' export default { plugins: [ vueJsx({ // options are passed on to @vue/babel-plugin-jsx }) ] } ``` ## [vite-plugin-pages](https://github.com/hannoeru/vite-plugin-pages) 配合vue-router来动态生成路由信息的插件,可以根据对应的文件结构来生成路由信息,不再需要手动的去配置路由.Nuxt中就是相似的方式来实现路由,可以通过`nuxtStyle`配置项来使用`nuxt`的方式来设置文件结构. ```typescript import pages from 'vite-plugin-pages' export default { plugins: [ pages({ pagesDir: [{ dir: 'src/views', baseRoute: '' }], exclude: ['**/components/*.vue'], nuxtStyle: true })] } ``` 使用时通过`virtual:generated-pages`即可导入生成的路由数据 ```typescript import routes from 'virtual:generated-pages' const router = createRouter({ // ... routes, }); ``` 按以下文件结构 ```bash src/ ├── views/ │ └── page1.vue │ └── page2.vue ``` 即可生成类似如下路由 ```typescript routes:[{ path:'/page1' component: ()=>import('~/views/page1.vue') },{ path:'/page2' component: ()=>import('~/views/page2.vue') }] ``` ## [vite-plugin-vue-layouts](https://github.com/JohnCampionJr/vite-plugin-vue-layouts) 配合`vite-plugin-pages`使用,可以在生成页面路由的基础上实现动态布局功能. ```typescript import Vue from '@vitejs/plugin-vue'; import Pages from 'vite-plugin-pages'; import Layouts from 'vite-plugin-vue-layouts'; export default { plugins: [Vue(), Pages(), Layouts()], }; ``` 在对应的页面单文件中添加布局配置,在路由时即可按配置切换布局,将页面嵌入对应的布局文件之中. ```vue meta: layout: users ``` ## [vite-plugin-components](https://github.com/antfu/vite-plugin-components) `vite-plugin-components`可以实现组件库或内部组件的自动按需引入组件,而不需要手动的进行import,可以帮我们省去不少`import`的代码 ```typescript import Vue from '@vitejs/plugin-vue' import ViteComponents from 'vite-plugin-components' export default { plugins: [ Vue(), ViteComponents() ], }; ``` `vite-plugin-components`插件支持多种组件库: - [Ant Design Vue](https://github.com/antfu/vite-plugin-components/blob/master/src/resolvers/antdv.ts) - [Element Plus](https://github.com/antfu/vite-plugin-components/blob/master/src/resolvers/element-plus.ts) - [Headless UI](https://github.com/antfu/vite-plugin-components/blob/master/src/resolvers/headless-ui.ts) - [Naive UI](https://github.com/antfu/vite-plugin-components/blob/master/src/resolvers/naive-ui.ts) - [Prime Vue](https://github.com/antfu/vite-plugin-components/blob/master/src/resolvers/prime-vue.ts) - [Vant](https://github.com/antfu/vite-plugin-components/blob/master/src/resolvers/vant.ts) - [Varlet UI](https://github.com/antfu/vite-plugin-components/blob/master/src/resolvers/varlet-ui.ts) - [Vuetify](https://github.com/antfu/vite-plugin-components/blob/master/src/resolvers/vuetify.ts) - [VueUse Components](https://github.com/antfu/vite-plugin-components/blob/master/src/resolvers/vueuse.ts) - [View UI](https://github.com/antfu/vite-plugin-components/blob/main/src/resolvers/view-ui.ts) - [Element UI](https://github.com/antfu/vite-plugin-components/blob/main/src/resolvers/element-ui.ts) 可以快速方便的实现这些组件库的自动按需加载 ```typescript import ViteComponents, { AntDesignVueResolver, ElementPlusResolver, VantResolver, } from 'vite-plugin-components' export default { plugins: [ /* ... */ ViteComponents({ customComponentResolvers: [ AntDesignVueResolver(), ElementPlusResolver(), VantResolver(), ] }), ], } ``` 也可以手动指定目录来加载自建组件,通过`globalComponentsDeclaration`属性,可以自动生成`typescript`定义文件,来获得`typescript`支持. ```typescript components({ globalComponentsDeclaration: 'typings/components.d.ts', dirs: ['src/shared/components'], }) ``` ## [vite-plugin-icons](https://github.com/antfu/vite-plugin-icons) 基于`Iconify`图标的vite插件支持,让你方便的使用iconify图标(真的超方便),可以配合`vcode`的`Iconify IntelliSense`插件使用. ```typescript import Vue from '@vitejs/plugin-vue' import Icons from 'vite-plugin-icons' export default { plugins: [ Vue(), Icons() ], } ``` 配置后即可在项目中通过引入虚拟文件的方式来使用iconify里的图标 ```typescript ``` 而且可以配置`vite-plugin-components`一起使用,可以省去`import`的代码,让你写起来更便捷. ```typescript import Vue from '@vitejs/plugin-vue' import Components from 'vite-plugin-components' import ViteIcons, { ViteIconsResolver } from 'vite-plugin-icons' export default { plugins: [ Vue(), Components({ customComponentResolvers: ViteIconsResolver(), }), ViteIcons(), ], } ``` 配置`ViteIconsResolver`后直接在代码中使用组件即可,写起来那酸爽不言而喻. ## [vite-plugin-windicss](https://github.com/windicss/vite-plugin-windicss) `vite`的`windicss`支持插件,按[windicss](`https://windicss.org/integrations/vite.html`)安装文档进行配置即可,比`tailwindcss`安装起来更方便. ```typescript import WindiCSS from 'vite-plugin-windicss' export default { plugins: [ WindiCSS(), ], } ``` 不得不说`windicss`3.0的`Attributify mode`真的很不错,不会有在`tailwindcss`中`class`一长串的问题了 ## [vite-plugin-pwa](https://github.com/antfu/vite-plugin-pwa) `vite`的`pwa`支持插件,快速让你的项目开启`pwa`功能. ```typescript import { VitePWA } from 'vite-plugin-pwa' export default { plugins: [ VitePWA() ] } ``` ## [vite-svg-loader](https://github.com/jpkleemans/vite-svg-loader#readme) `vite-svg-loader`插件可以让你像引用组件一样引用`svg`文件. 可以通过三种后缀支持三种模式加载 - ?raw - ?url - ?component ```typescript import svgLoader from 'vite-svg-loader' export default defineConfig({ plugins: [vue(), svgLoader()] }) ``` ```vue sfc