vue3实现自动引入

在vue3中,使用ref,reactive等api,需要进行如下操作

<script setup>
//引入api
import {ref} from 'vue'

let name = ref('王惊涛')
<script>

 自动引入后的效果

<script setup>
//直接使用
let name = ref('王惊涛')
<script>

安装依赖包

npm i -D unplugin-auto-import

配置

vite创建的项目配置

vite.config.ts

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
     //自动引入
    AutoImport({
      imports:['vue','vue-router'],
      dts:'src/auto-import.d.ts'
    })
  ],
})

webpack或者vue-cli配置

进行如下配置

webpack.config.js 或者 vue.config.js

plugins: [    
//自动导入vue的组合式api        
      require('unplugin-auto-import/webpack')({
        // 自动导入 Vue 相关函数，如：ref, reactive, toRef 等
        imports: ['vue', 'vue-router'],
      })
        ],

配置好之后,重启项目就可以了,会生成一个auto-imports.d.ts文件,就可以直接使用ref,reactive等