This is the second day of my participation in the August Text Challenge.More challenges in August

After using Vite for a period of time, the project has also used or tried some good plug-ins, here is also a summary and share these plug-ins, I hope it can also be helpful to you.

vite-plugin-eslint

The esLint plugin for Vite is a common plugin that allows your project to be easily supported by ESLint. After configuring ESLint, you can quickly integrate it into Vite, so that you can see the first warning when your code does not conform to the ESLint specification.

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

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

@nabla/vite-plugin-eslint

Plugineslint – This is a plugin based on the above version of Viet-pluginesLint, which supports asynchronous detection to speed up project startup, but also does not stop project compilation early if there are errors or warnings.

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

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

vite-plugin-checker

Viet-plugin-checker is also a checker plugin, but it also supports a wide range of typeScript, VLS, VUE – TSC, and ESLint options. Eslint is still a bit more comprehensive, but I had some problems using it without being prompted after refreshing the browser.

import checker from 'vite-plugin-checker'

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

@vitejs/plugin-vue-jsx

Vite supports JSX/TSX syntax plug-in. After configuration, vUE can support JSX/TSX syntax in a single file.

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

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

vite-plugin-pages

The plug-in that works with vue-Router to dynamically generate routing information can generate routing information according to the corresponding file structure without manually configuring routes. Nuxt implements routing in a similar way, using the nuxtStyle configuration item to set the file structure in Nuxt style.

import pages from 'vite-plugin-pages'

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

You can run virtual:generated-pages to import the generated route data

import routes from 'virtual:generated-pages'

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

According to the following file structure

├─ ├─ ├─ page2.├.src/exercises / ├─ ├─ page2.txtCopy the code

Routes similar to the following are generated

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

vite-plugin-vue-layouts

With the use of Viet-plugin-Pages, the dynamic layout function can be realized on the basis of generating page routing.

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

You can add layout configuration to the corresponding layout file to switch the layout during routing and embed the page into the corresponding layout file.

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

vite-plugin-components

Vite-plugin-components can automatically import components from the component library or internal components on demand, without the need to manually import components, which can save a lot of import code

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

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

The vite-plugin-Components plugin supports a variety of component libraries:

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

These component libraries can be quickly and conveniently loaded automatically on demand

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

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

Can also be manually specified directory to load the self-built components, through globalComponentsDeclaration properties, can automatically generate typescript definition file, to get the typescript.

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

vite-plugin-icons

Vite support for Iconify ICONS makes it easy to use Iconify ICONS (super handy) with vcode’s Iconify IntelliSense plugin.

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

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

Once configured, ICONS in Iconify can be used in a project by importing virtual files

<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>
Copy the code

In addition, you can configure the vite-plugin-components to be used together, which can save the code of import, so that you can write more convenient.

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(),
  ],
}
Copy the code

After configuring ViteIconsResolver, you can use the components directly in your code.

vite-plugin-windicss

Vite windicss support plug-in, according to the windicss installation documentation for configuration, more convenient than tailwindcss installation.

import WindiCSS from 'vite-plugin-windicss'

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

I have to say that Windows 3.0 Attributify mode is really good and doesn’t have a long list of class problems in tailwindcss

vite-plugin-pwa

Vite pWA support plug-in, quickly enable your project PWA function.

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

export default {
 plugins: [
   VitePWA()
 ]
}
Copy the code

vite-svg-loader

The viet-SVG-loader plug-in lets you reference SVG files as if they were components.

Three modes of loading can be supported by three suffixes

  • ? raw

  • ? url

  • ? component

import svgLoader from 'vite-svg-loader'

export default defineConfig({
 plugins: [vue(), svgLoader()]
})
Copy the code
<template> <my-icon/> </template> <script setup lang="ts> import MyIcon from './my-icon.svg? component' </script>Copy the code

If you feel this article is helpful to your words might as well 🍉 attention + like + favorites + comments + forward 🍉 support yo ~~😛