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

最新推荐文章于 2026-06-06 14:21:57 发布

原创最新推荐文章于 2026-06-06 14:21:57 发布 · 6.6k 阅读 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

代码可运行

在Vue3项目开发中，unplugin-auto-import插件能够自动引入所需的新语法，避免手动配置。通过npm安装并配置vite.config.ts，即可实现自动导入vue3的ref等特性，简化代码编写。在示例中，无需手动引入ref，直接在setup脚本中使用，提升了开发效率。

AI 驱动代码审查实战

Claude code-review 插件深度解析，把 AI 智能审查接进 CI/CD 流水线

一键订阅

最近写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")
    }
  }
})

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>