插件vite-plugin-vue-setup-extend

vite-plugin-vue-setup-extend是一个用于增强 Vue 3 在 Vite 项目中使用<script setup>语法的插件。

安装插件：

npm i vite-plugin-vue-setup-extend -D

在vite.config.js文件中，引入并使用该插件：

import VueSetupExtend from 'vite-plugin-vue-setup-extend'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    VueSetupExtend(),
  ]
})

修改<script setup>标签：

<script setup lang="ts" name="Person">
<script>

vite-plugin-vue-setup-extend 插件可以通过扩展的方式，给 setup 函数添加新的功能。

• 允许在 setup 函数中使用 ES6 模块语法

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="incrementCount">Increment</button>
  </div>
</template>

<script setup>
// 使用插件后，可以直接导入 ref 和 reactive，无需显式从 'vue' 导入
import { ref } from 'vue';
const message = ref('Hello from setup!');
const count = ref(0);

function incrementCount() {
  count.value++;
}
</script>

• 允许在 setup 函数中使用 async/await 异步操作
  假设有一个异步函数用于获取数据：

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('Error fetching data:', error);
    return null;
  }
}

在组件的 setup 函数中可以这样使用：

<template>
  <div v-if="data">{{ data.message }}</div>
</template>

<script setup>
import { ref } from 'vue';
import { fetchData } from './dataService.js';

const data = ref(null);
async function loadData() {
  data.value = await fetchData();
}
loadData();
</script>

• 支持在 setup 函数中使用源代码映射（source map）