vite-plugin-components-autoimport v0.0.8

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.