unplugin-vue-components/vite automatically introduces Vue components used in the project on demand

unplugin-vue-componentsIt is a Vite plug-in that can automatically introduce Vue components used in the project on demand to reduce the packaging volume. It is used like this:

1. Install the plugin:

   npm install -D unplugin-vue-components
   

2. Configure the plugin in vite.config.js:

   import {
         
          defineConfig } from 'vite'
   import vue from '@vitejs/plugin-vue'
   import Components from 'unplugin-vue-components/vite'
   
   export default defineConfig({
         
         
     plugins: [
       vue(),
       Components({
         
         
         // 配置插件选项
       })
     ]
   })
   

3. Configure plugin options such as:

   import {
         
          ElementPlusResolver } from 'unplugin-vue-components/resolvers'
   
   export default defineConfig({
         
         
     plugins: [
       // ...
       Components({
         
         
         resolvers: [
           ElementPlusResolver()
         ],
         dts: 'src/components.d.ts'
       })
     ]
   })
   

   In the above code, we use ElementPlusResolverto parse the components in the Element Plus component library. dtsThe option specifies the path to the generated TypeScript type file.

   unplugin-vue-componentsMany other options and parsers are provided and can be configured according to the needs of the project.

After using unplugin-vue-componentsthe plug-in, we can use the component directly in the project without introducing it manually. For example:

<template>
  <div>
    <el-button>Click me!</el-button>
  </div>
</template>

In the above code, we directly use el-buttonthe components in the Element Plus component library without manually introducing them. The plug-in will automatically introduce the component into the project on demand.