vue3自动引入ref,reactive等api

 前提摘要，我的项目是使用vue3+vite+Eslint搭建的

import { reactive, ref } from 'vue'
const account = reactive({
  username: '',
  password: ''
})
let number= ref(1)

在定义变量的时候，要手动引入import { reactive, ref } from 'vue'

为了不用手动引入，方便开发，我们可以下载插件 

yarn add unplugin-auto-import

在 vite.config.js中配置

export default defineConfig({
  plugins: [
    AutoImport({
      imports: ['vue', 'vue-router'],
      eslintrc: {
        enabled: true
      }
    })
  ],
})

保存之后，项目会生成一个文件夹.eslintrc-auto-import.json

我配置了Eslint，在.eslintrc.cjs中配置

module.exports = {
  extends: [
    './.eslintrc-auto-import.json',
  ],
}

最后一步啦，试试把import { reactive, ref } from 'vue'去掉看看效果吧