vue3 自动引入ref，reavtive等语法的插件_vue3中自动导入ref

最近写vue3项目的时候接触到一个插件，可以帮你自动引入vue3新语法，不用再自己引入，有兴趣的小伙伴可以取github看看，尤大大推荐

插件名： unplugin-auto-import

下载安装：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")
    }
  }
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

Demo:页面中使用

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21