按需引入神器,以后再也不用手动引入(组件、Element-ui库、vue hooks等)

平平无奇一个学习总结记录贴

本文将介绍下面几个Vite插件(推荐node版本14+)：

• 自定义组件自动引入 unplugin-vue-components
• element-plus 组件自动引入 unplugin-vue-components
• vue3等插件 hooks 自动引入 unplugin-auto-import/vite

1、unplugin-vue-components 自动导入组件

1. 1自动导入ui库,该插件内置了大多数流行库解析器

npm install unplugin-vue-components -D

这里使用 Element Plus、Ant Design Vue 、Vant 作为示例，想了解其他组件的可以前往参考官方

安装后将下面的代码添加到 Vite 或 Webpack 的配置文件。

Vite配置

import { defineConfig } from 'vite'
import Components from 'unplugin-vue-components/vite'
import {
  ElementPlusResolver,
  VantResolver,
  ElementUiResolver
} from 'unplugin-vue-components/resolvers'

export default defineConfig({
  plugins: [
    Components({
      // ui库解析器，也可以自定义
      resolvers: [
        ElementPlusResolver(),
        AntDesignVueResolver(),
        VantResolver()
      ]
    })
  ]
})

Webpack配置

const components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver,AntDesignVueResolver,VantResolver } = require('unplugin-vue-components/resolvers')

module.exports =
  plugins: [
    Components({
      resolvers: [
         AntDesignVueResolver(),
         ElementPlusResolver(),
         VantResolver()
      ]
    })
  ]
}

会自动生成components.d.ts文件，里面都是ui库组件

1.2 导入自定义组件

直接写组件名即可，插件会自动引入

1.3 插件的所有默认配置

// 插件的所有默认配置
Components({
  // relative paths to the directory to search for components.
  // 要搜索组件的目录的相对路径
  dirs: ['src/components'],
  
  // valid file extensions for components.
  // 组件的有效文件扩展名。
  extensions: ['vue'],
  
  // search for subdirectories
  // 搜索子目录
  deep: true,
  
  // resolvers for custom components
  // 自定义组件的解析器
  resolvers: [],

  // generate `components.d.ts` global declarations, 
  // also accepts a path for custom filename
  // 生成 `components.d.ts` 全局声明，
  // 也接受自定义文件名的路径
  dts: false,

  // Allow subdirectories as namespace prefix for components.
  // 允许子目录作为组件的命名空间前缀。
  directoryAsNamespace: false,
  
  // 忽略命名空间前缀的子目录路径
  // 当`directoryAsNamespace: true` 时有效
  // Subdirectory paths for ignoring namespace prefixes
  // works when `directoryAsNamespace: true`
  globalNamespaces: [],

  // auto import for directives
  // default: `true` for Vue 3, `false` for Vue 2
  // Babel is needed to do the transformation for Vue 2, it's disabled by default for performance concerns.
  // To install Babel, run: `npm install -D @babel/parser @babel/traverse`
  // 自动导入指令
  // 默认值：Vue 3 的`true`，Vue 2 的`false`
  // 需要 Babel 来为 Vue 2 进行转换，出于性能考虑，它默认处于禁用状态。
  directives: true,

  // filters for transforming targets
  include: [/.vue$/, /.vue?vue/],
  exclude: [/[/]node_modules[/]/, /[/].git[/]/, /[/].nuxt[/]/],
})

2、unplugin-auto-import 自动导入vue3的hooks

安装

npm i -D unplugin-auto-import

使用效果

// 引入前
import { ref, computed } from 'vue'
const count = ref(0)
const doubled = computed(() => count.value * 2)

//引入后
const count = ref(0)
const doubled = computed(() => count.value * 2)


// 引入前
import { useState } from 'react'
export function Counter() {
  const [count, setCount] = useState(0)
  return <div>{ count }</div>
}

//引入后
export function Counter() {
  const [count, setCount] = useState(0)
  return <div>{ count }</div>
}

Vite配置

import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'

export default defineConfig({
  plugins: [
    AutoImport({
      imports: ['vue', 'vue-router', 'vue-i18n', '@vueuse/head', '@vueuse/core'],
      // 可以选择auto-import.d.ts生成的位置，使用ts建议设置为'src/auto-import.d.ts'
      // 默认为'src/auto-import.d.ts'
      // dts: 'src/auto-import.d.ts'
    })
  ]
})

安装的时候会自动生成auto-imports.d文件(默认是在根目录)

其他插件 vue-router, vue-i18n, @vueuse/head, @vueuse/core 等自动引入的自动引入请查看官方文档

// 插件的所有默认配置
AutoImport({
  // targets to transform
  include: [
    /.[tj]sx?$/, // .ts, .tsx, .js, .jsx
    /.vue$/, /.vue?vue/, // .vue
    /.md$/, // .md  
  ],

  // global imports to register
  imports: [
    // presets
    'vue',
    'vue-router',
    // custom
    {
      '@vueuse/core': [
        // named imports
        'useMouse', // import { useMouse } from '@vueuse/core',
        // alias
        ['useFetch', 'useMyFetch'] // import { useFetch as useMyFetch } from '@vueuse/core',
      ],
      'axios': [
        // default imports
        ['default', 'axios'] // import { default as axios } from 'axios',
      ],
      '[package-name]': [
        '[import-names]',
        // alias
        ['[from]', '[alias]']
      ]
    }
  ],

  // custom resolvers
  // 可以在这自定义自己的东西，比如接口api的引入，工具函数等等
  // see https://github.com/antfu/unplugin-auto-import/pull/23/
  resolvers: [
    /* ... */
  ]
})

3、vite-plugin-style-import

当你使用unplugin-vue-components引入ui库的时候 message, notification 等引入样式不生效 安装vite-plugin-style-import即可

这里以一些常用的库为示例：

import { defineConfig } from 'vite'
import styleImport, {
  AndDesignVueResolve,
  VantResolve,
  ElementPlusResolve,
  NutuiResolve,
  AntdResolve
} from 'vite-plugin-style-import'

export default defineConfig({
  plugins: [
    styleImport({
      resolves: [
        AndDesignVueResolve(),
        VantResolve(),
        ElementPlusResolve(),
        NutuiResolve(),
        AntdResolve()
      ],
      // 自定义规则
      libs: [
        {
          libraryName: 'ant-design-vue',
          esModule: true,
          resolveStyle: (name) => {
            return `ant-design-vue/es/${name}/style/index`
          }
        }
      ]
    })
  ],
  // 引用使用less的库要配置一下
  css: {
    preprocessorOptions: {
      less: {
        javascriptEnabled: true
      }
    }
  }
})