Vue3 自动引入ref，reavtive等语法

安装

npm i -D unplugin-auto-import

配置

//vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
//配置vuejsx
import vueJsx from '@vitejs/plugin-vue-jsx';
import { resolve } from "path"
//引入自动引入插件
import AutoImport from 'unplugin-auto-import/vite'
// https://vitejs.dev/config/  //npm install @types/node --save-dev
export default defineConfig({
  plugins: [vue(), vueJsx(), AutoImport({
    imports: ['vue'], dts: 'src/auto-import.d.ts'
  })],
  // 配置 @ 符号
  resolve: {
    alias: {
      "@": resolve(__dirname, "src")
    }
  }
})

使用

<template>
  <!-- <Layout /> -->
  <div class="APP">我是根组件
    <button @click="changeFlag">change</button>
    <div>{{ flag }}</div>
  </div>
</template>
<script lang="ts" setup>
//没有手动引入ref
const flag = ref(false)
const changeFlag = () => {
  flag.value = !flag.value
}
</script>
<style lang = "less" >
.APP {
  width: 300px;
  height: 300px;
  background-color: aquamarine;
}
</style>