我通过引导项目内容然后构建它以进行部署来编写(业余)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框架,但这并没有改变我问题的核心。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
根据官方文档,您无法使用 CDN 来使用脚本设置一>:
但是您可以在页面脚本中使用设置挂钩,如下所示:
const { createApp, ref } = Vue; const App = { setup() { const hello = ref('Bonjour') return { hello } } } const app = createApp(App) app.mount('#app')