unplugin-auto-import & unplugin-vue-components

unplugin-auto-import

自动引用，不需要手动引入。

import { ref, reactive } from 'vue'
const count = ref(0)
const form = reactive({})

上面是常规的引用后使用，下面是 auto import 之后的直接使用

const count = ref(0)
const form = reactive({})

vue3 + vite + typescript 中使用 unplugin-auto-import

pnpm i -D unplugin-auto-import

// vite.config.ts
import AutoImport from 'unplugin-auto-import/vite'

export default defineConfig({
  plugins: [
    AutoImport({
        dts: "./auto-imports.d.ts", // pnpm dev 之后生成的import文件
        imports: ["vue"], // 需要自动引入的库。例如 vue vue-router pinia
        include: [/\.vue$/, /\.vue\?vue/],
        eslintrc: { // 避免ts报错
            enabled: true,
            filepath: "./.eslintrc-auto-import.json", // pnpm dev 之后生成的 eslint文件
            globalsPropValue: true
        },
    }),
  ],
})

好用！

unplugin-vue-components

当我们使用ui库的组件大概率不希望全局引用，失去 tree-shaking 能力，打包有冗余代码。然后手动的一个个引用的话又显得繁琐，所以这里可以使用 unplugin-vue-components

<script setup lang="ts">
import { NButton } from 'naive'

</script>
<template>
<n-button>我猜你的枪里没有子弹</n-button>
</template>

使用了这个插件之后就不需要单独引用了。

import { NaiveUiResolver } from 'unplugin-vue-components/resolvers'
import Components from 'unplugin-vue-components/vite'

export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [NaiveUiResolver()]
    })
  ]
})