Vue3中自动引入ref、reactive等语法

在 Vue3 项目中我们可以发现定义变量跟使用vue里面的方法，都要 import { ref } from 'vue'；很不方便

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

npm install unplugin-auto-import

yarn add unplugin-auto-import

pnpm install unplugin-auto-import

在 vite.config.js中配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { relative } 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',
      // 如有用到eslint记得加上写段，没有用到可以忽略
      eslintrc: {
        enabled: true,
      },
    }),
  ],
  resolve: {
    alias: {
      '@': relative(__dirname, 'src'),
    },
  },
  server: {
    host: '0.0.0.0', //显示当前局域网
    open: false, //是否自动启动浏览器
  },
})

 保存之后重新启动项目，这个时候在src下面就会自动生成一个 auto-imports.d.ts文件，全局状态下生成一个文件夹.eslintrc-auto-import.json

在.eslintrc.cjs中配置

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

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