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
)