使用Compose API在独立的(单文件)Vue3 SPA中的方法
P粉106711425
P粉106711425 2024-03-26 23:28:38
0
1
372

我通过引导项目内容然后构建它以进行部署来编写(业余)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框架,但这并没有改变我问题的核心。

P粉106711425
P粉106711425

全部回复(1)
P粉633733146

根据官方文档,您无法使用 CDN 来使用脚本设置一>:

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

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


    return {
      hello
    }

  }


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

{{hello}}
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板