Vue3 自动导包配置

Vue3 一百个案例总目录

使用 unplugin-auto-import 插件可以实现自动导包。

安装

npm i -D unplugin-auto-import unplugin-vue-components

配置

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { NaiveUiResolver } from 'unplugin-vue-components/resolvers'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      imports: [
        'vue',
        'vue-router',
        'pinia',
        {
          'naive-ui': [
            'useDialog',
            'useMessage',
            'useNotification',
            'useLoadingBar'
          ]
        }
      ]
    }),
    Components({
      resolvers: [NaiveUiResolver()]
    })
  ]
})

运行 npm run dev 之后会生成两个文件：

"auto-imports.d.ts",
"components.d.ts"

把他俩加入到 tsconfig.app.json 文件中，否则会报类似错误：Cannot find name 'ref'.ts(2304)：

{
  "include": [
    "env.d.ts",
    "src/**/*",
    "src/**/*.vue",
    // 引入
    "auto-imports.d.ts",
    "components.d.ts"
  ],
	//...
}

使用

<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>

简化成：

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

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

存在的问题

目前没找到自动导入类型的方法，例如省略如下代码：

import type {
  FormItemRule,
  FormValidationError,
  FormRules,
  FormInst
} from 'naive-ui';

依然会报错。

参考文章

• unplugin-vue-components
• unplugin-auto-import