如何在独立（单文件）Vue3 SPA 中使用 Compose API？

Question

我通过引导项目内容然后构建它以进行部署来编写（业余）Vue3 应用程序^(*)。效果很好。

我需要创建一个独立的单一 HTML 页面，可以直接在浏览器中加载。几年前我刚开始使用 Vue 时（在 v1 → v2 的过渡期间），我曾经这样做过，那时我立即找到了正确的文档。

我无法为 Vue3 和 Composition 找到类似的 API。

什么是显示值反应变量 {{hello}} 的骨架页面（我将在 <script setup> 中在完整的构建应用程序的上下文中定义）

我以前就是这样做的（希望我做对了）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue@2"></script>
</head>
<body>

<div id="app">
    {{hello}}
</div>

<script>
    // this is how I used to do it in Vue2 if I remember correctly
    new Vue({
        el: '#app',
        data: {
            hello: "bonjour!"
        }
        // methods, watch, computed, mounted, ...
    })
</script>

</body>
</html>

^{(*) 我实际上使用了 Quasar framework 但这并没有改变我问题的核心。}

Answer 1

根据 official docs:

，您无法使用 CDN 进行脚本设置

<script setup> is a compile-time syntactic sugar for using Composition API inside Single File Components (SFCs)

但您可以在页面脚本中使用设置挂钩，如下所示：

const {
  createApp,
  ref
} = Vue;
const App = {
  setup() {
    const hello = ref('Bonjour')


    return {
      hello
    }

  }


}
const app = createApp(App)
app.mount('#app')

<script src="https://unpkg.com/vue@3.0.0-rc.11/dist/vue.global.prod.js"></script>

<div id="app">
  {{hello}}
</div>

如何在独立（单文件）Vue3 SPA 中使用 Compose API？

How to use Compose API in a standalone (one-file) Vue3 SPA?

vue.js

vuejs3

vue-script-setup