Vite之高效插件推荐🍉

这是我参与8月更文挑战的第2天，活动详情查看：8月更文挑战

项目在使用了一段时间vite后,也用过或尝试过一些好用的插件,在这里也算总结和分享一下这些插件,希望也能对你有帮助.

vite-plugin-eslint

vite的eslint插件,可是一个常见的插件,让你的项目可以方便的得到eslint支持,完成eslint配置后,可以快速的将其集成进vite之中,便于在代码不符合eslint规范的第一时间看到提示.

import { defineConfig } from 'vite';
import eslintPlugin from 'vite-plugin-eslint';

export default defineConfig({
  plugins: [eslintPlugin()],
});

@nabla/vite-plugin-eslint

这是基于上面的vite-plugineslint修改的一个插件,特点是支持异步检测可以加速项目的启动速度,不过缺点也是如果有错误或者警告不会提前停止项目编译.

import { defineConfig } from "vite";
import eslintPlugin from "@nabla/vite-plugin-eslint";

export default defineConfig({
  plugins: [eslintPlugin()],
});

vite-plugin-checker

vite-plugin-checker也是检测插件,不过他的支持也相对广泛,支持typeScript,vls,vue-tsc,eslint多种方式,不过还是感觉eslint更全面一些,不过我在使用中会出现刷新浏览器后不提示的问题.

import checker from 'vite-plugin-checker'

export default {
  plugins: [checker({ typescript: true })]
}

@vitejs/plugin-vue-jsx

常用插件,vite对jsx/tsx语法支持插件,配置后vue单文件中即可支持jsx/tsx语法.

import vueJsx from '@vitejs/plugin-vue-jsx'

export default {
  plugins: [
    vueJsx({
      // options are passed on to @vue/babel-plugin-jsx
    })
  ]
}

vite-plugin-pages

配合vue-router来动态生成路由信息的插件,可以根据对应的文件结构来生成路由信息,不再需要手动的去配置路由.Nuxt中就是相似的方式来实现路由,可以通过nuxtStyle配置项来使用nuxt的方式来设置文件结构.

import pages from 'vite-plugin-pages'

export default {
  plugins: [  
      pages({
          pagesDir: [{ dir: 'src/views', baseRoute: '' }],
          exclude: ['**/components/*.vue'],
          nuxtStyle: true
        })]
}

使用时通过virtual:generated-pages即可导入生成的路由数据

import routes from 'virtual:generated-pages'

const router = createRouter({
  // ...
  routes,
});

按以下文件结构

src/
  ├── views/
  │  └── page1.vue
  │  └── page2.vue

即可生成类似如下路由

routes:[{
        path:'/page1'
        component: ()=>import('~/views/page1.vue')
    },{
        path:'/page2'
        component: ()=>import('~/views/page2.vue')
    }]

vite-plugin-vue-layouts

配合vite-plugin-pages使用,可以在生成页面路由的基础上实现动态布局功能.

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()],
};

在对应的页面单文件中添加布局配置,在路由时即可按配置切换布局,将页面嵌入对应的布局文件之中.

<route lang="yaml">
meta:
  layout: users
</route>

vite-plugin-components

vite-plugin-components可以实现组件库或内部组件的自动按需引入组件,而不需要手动的进行import,可以帮我们省去不少import的代码

import Vue from '@vitejs/plugin-vue'
import ViteComponents from 'vite-plugin-components'

export default {
  plugins: [
    Vue(),
    ViteComponents()
  ],
};

vite-plugin-components插件支持多种组件库:

• Ant Design Vue
• Element Plus
• Headless UI
• Naive UI
• Prime Vue
• Vant
• Varlet UI
• Vuetify
• VueUse Components
• View UI
• Element UI

可以快速方便的实现这些组件库的自动按需加载

import ViteComponents, {
  AntDesignVueResolver,
  ElementPlusResolver,
  VantResolver,
} from 'vite-plugin-components'

export default {
  plugins: [
    /* ... */
    ViteComponents({
      customComponentResolvers: [
        AntDesignVueResolver(),
        ElementPlusResolver(),
        VantResolver(),
      ]
    }),
  ],
}

也可以手动指定目录来加载自建组件,通过globalComponentsDeclaration属性,可以自动生成typescript定义文件,来获得typescript支持.

components({
      globalComponentsDeclaration:
        'typings/components.d.ts',
      dirs: ['src/shared/components'],
   
})

vite-plugin-icons

基于Iconify图标的vite插件支持,让你方便的使用iconify图标(真的超方便),可以配合vcode的Iconify IntelliSense插件使用.

import Vue from '@vitejs/plugin-vue'
import Icons from 'vite-plugin-icons'

export default {
 plugins: [
   Vue(),
   Icons()
 ],
}

配置后即可在项目中通过引入虚拟文件的方式来使用iconify里的图标

<script setup>
import IconAccessibility from 'virtual:vite-icons/carbon/accessibility'
import IconAccountBox from 'virtual:vite-icons/mdi/account-box'
</script>

<template>
  <icon-accessibility/>
  <icon-account-box style="font-size: 2em; color: red"/>
</template>

而且可以配置vite-plugin-components一起使用,可以省去import的代码,让你写起来更便捷.

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

vite的windicss支持插件,按windicss安装文档进行配置即可,比tailwindcss安装起来更方便.

import WindiCSS from 'vite-plugin-windicss'

export default {
 plugins: [
   WindiCSS(),
 ],
}

不得不说windicss3.0的Attributify mode真的很不错,不会有在tailwindcss中class一长串的问题了

vite-plugin-pwa

vite的pwa支持插件,快速让你的项目开启pwa功能.

import { VitePWA } from 'vite-plugin-pwa'

export default {
 plugins: [
   VitePWA()
 ]
}

vite-svg-loader

vite-svg-loader插件可以让你像引用组件一样引用svg文件.

可以通过三种后缀支持三种模式加载

• ?raw

• ?url

• ?component

import svgLoader from 'vite-svg-loader'

export default defineConfig({
 plugins: [vue(), svgLoader()]
})

<template>
    <my-icon/>
</template>

<script setup lang="ts>
import MyIcon from './my-icon.svg?component'
</script>

如果您觉得这篇文章有帮助到您的的话不妨🍉关注+点赞+收藏+评论+转发🍉支持一下哟~~😛