uniapp+vue3使用unplugin-auto-import实现自动引入ref

下载插件

pnpm install unplugin-auto-import

vite.config.js中配置

import { defineConfig } from "vite";
import uni from "@dcloudio/vite-plugin-uni";
import AutoImport from "unplugin-auto-import/vite";


export default ({}) => {
  return defineConfig({
    plugins: [
      uni(),
      AutoImport({
        include: [
          /\.[tj]sx?$/, // .ts, .tsx, .js, .jsx
          /\.vue$/,
          /\.vue\?vue/, // .vue
        ],
        imports: ["vue", "uni-app"],
        dts: "typings/auto-imports.d.ts",
      }),
    ],
  });
};

vue页面中无需引用即可使用

<template>
  <view class="content">
    <view class="text-area">
      <text class="title">{{ title }}</text>
      <view>{{ info.name }}</view>
    </view>
  </view>
</template>

<script setup>
const title = ref("Hello");
const info = reactive({
  name: "张三",
});
</script>