README

vite-plugin-components-autoimport

Introduce

Vue plugin based on unplugin-vue-components is a tool that can automatically import components by identifying the tag prefix of custom components.

Before
After

Install

// Please confirm the installation of unplugin-vue-components before use
// npm i unplugin-vue-components -D

npm i vite-plugin-components-autoimport -D
yarn add vite-plugin-components-autoimport -D

Usage

vite.config.[js|ts]

// vite.config.[js|ts]
import { defineConfig } from 'vite'
import Vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'
import VueComponentsAutoImport from 'vite-plugin-components-autoimport'

export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [
        // By default, components are automatically found from the /src/components directory
        VueComponentsAutoImport()
      ]
    })
  ]
})

完整配置

interface customResolverOptions {
  /**
   * autoimport component from the directory
   * @default '/src/components'
   */
  dir?: string | '/src/components'
  /**
   * autoimport component along with the prefix of custom tag name
   * @default 'Ai'
   */
  prefix?: string | 'Ai'
  /**
   * import style along with components
   * @default 'css'
   */
  importStyle?: boolean | 'css' | 'less' | 'sass'
  /**
   * import global style exclude with the name of component
   * @default []
   */
  globalStyleExclude?: string[] | []
}

Component

Component structure

|-- components
    |-- component-name  // Component name without prefix dash connection a-b-c
        |-- index.[js|ts]  // Used to import less|scss files
            |-- css.[js|ts]  // Used to import css files
            |-- any.[css|less|scss]

If the .vue single file component is used, add the .vue configuration in resolve.extensions in vite.config.[js|ts]：

// vite.config.[js|ts]
resolve: {
  extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue']
}

Style

If you use a separate style file(.css .less .scss)to define component styles, you need to create css.[js|ts] or index.[js|ts] in the stylefolder to import the corresponding style file, and the styles in the file will become global styles.

If it needs to be defined as a local style in the component, it is recommended to use a .vue single file component and define it directly in the component through scoped.

If a component does not have a separate style file, you need to configure the small hump name of the component in globalStyleExclude, otherwise an error will be reported because the default style file cannot be obtained.

Usage no npm install needed!