自动引入

unplugin-auto-import 可以用来引入 vue 中常用的方法,比如 refreactive 等等,也可以用于自动引入一些第三方的库。

比如以下这段代码:

<template>
  {{ name }}
</template>

<script setup>
const name = ref("鸣人")
</script>

将被转换为:

<template>
  {{ name }}
</template>

<script setup>
import ref from "vue"

const name = ref("鸣人")
</script>

简易教程

具体使用请参考其 github 上的文档

安装

npm i -D unplugin-auto-import

Vite 配置

以下针对 vuevue-routeraxiospinia 配置了自动引入,更多配置请看 github 上的文档。

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

export default defineConfig({
  plugins: [
    AutoImport({ 
      /* options */ 
      imports:[
        'vue',
        'vue-router',
         {
           pinia: ["defineStore"],
           axios: [
             // default imports
             ["default", "axios"], // import { default as axios } from 'axios',
           ],
         },
      ]
    }),
  ],
})

TypeScript 配置

// tsconfig.json
{
    "include": [
        // 包含自动导出的类型文件
        "auto-imports.d.ts",
    ],
}

自动引入组件

unplugin-vue-components 这个插件可以自动引入在 components 文件夹中定义的组件。

比如以下这段代码:

<template>
  <div>
    <HelloWorld msg="Hello Vue 3.0 + Vite" />
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

将被转换为:

<template>
  <div>
    <HelloWorld msg="Hello Vue 3.0 + Vite" />
  </div>
</template>

<script>
import HelloWorld from './src/components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

简易教程

具体使用请参考其 github 上的文档

安装

npm i unplugin-vue-components -D

Vite 配置

// vite.config.ts
import Components from 'unplugin-vue-components/vite'

export default defineConfig({
  plugins: [
    Components({ /* options */ }),
  ],
})

TypeScript 配置

// tsconfig.json
{
    "include": [
        // 包含自动导出的类型文件
        "components.d.ts",
    ],
}