Vue3 配置自动导入的步骤

一：介绍

        Vue3 与 Vue2 有众多区别，其中之一就是组件式开发。当我们在页面中使用时，需要先进行 import 导入，而后才能够使用 ref 等组件。但是这样会有些麻烦，因此我们可以使用一些依赖来进行自动导入。

二：unplugin-auto-import

1、安装

        在项目根目录下打开 powershell ，使用以下指令安装依赖。

npm i -D unplugin-auto-import

         出现以下情况则是安装成功

2、导入

        我们进入项目根目录下的 vite.config.ts 文件，代码如下，主要是第4行和8-10行的代码需要修改。而后保存使用 npm run dev 启动项目。

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'
import AutoImport from 'unplugin-auto-import/vite'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(),AutoImport({
    imports:['vue'],
    dts:'src/auto-import.d.ts'
  })],
  resolve:{//路径别名
    alias:{
      '@': resolve(__dirname,'./src')
    }
  },
})

         启动后我们就可以看到，在上面第十行定义的目录下，出现了 auto-import.d.ts 文件。

        文件内容如下，则项目已经成功导入了 unplugin-auto-import 。

 3、使用

        这时，我们再在页面中使用 ref 等组件，将不必再进行导入。