用html中用vue3 setup怎么用？

Question

我想在html里用vue3的setup写法。
不能直接这样来吗？
<script setup></script>

非得像下面这样吗？

const App = {
        setup() {}
}

Answer 1

是的。建议使用vite来创建

Answer 2

不行。<script setup> 是 Vue3 loader 提供的语法糖，实际运行的是编译后的代码，所以你直接放到 html 里不行。

Answer 3

如楼上所说setup是 Vue3 loader 提供的语法糖，当使用<script setup>的时候，任何在<script setup>声明的顶层的绑定 (包括变量，函数声明，以及 import 引入的内容) 都能在模板中直接使用

<template>
  <button @click="onAddNum">add Num {{ num }}</button>
</template>

<script setup>
import { ref } from "vue";

const num = ref(0);

constonAddNum = () => {
  num.value++;
};
</script>

<script setup>中可以使用顶层await。结果代码会被编译成async setup(),async setup()必须与Suspense组合使用，Suspense目前还是处于实验阶段的特性

<Suspense>
    <template>
        Aaron
    </template>
</Suspense>

<script setup>
const delay = () => {
    return new Promise((res) => {
      setTimeout(() => {
          res();
      },2000);
    })
};
console.log("异步");
await delay();
console.log(`2s后执行`);
</script>

Answer 4

https://gitee.com/Tofu_Xx/setupin
https://github.com/Tofu-Xx/setupin

这个能让你在html里写vue3的sfc