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）
