WoJ*_*WoJ 1 vue.js vuejs3 vue-composition-api vue-script-setup
我通过引导项目内容然后构建它以进行部署来编写（业余）Vue3 应用程序(*)。效果很好。
\n我需要创建一个可以直接在浏览器中加载的独立的单个 HTML 页面。几年前，当我开始使用 Vue 时（当时是在 v1 \xe2\x86\x92 v2 过渡期间），我曾经这样做过，当时我立即找到了正确的文档。
\n我找不到类似的 Vue3 和 Composition API。
\n显示值响应变量的框架页面是什么（我将在完整的构建应用程序的上下文中{{hello}}定义）<script setup>
这就是我过去的做法（我希望我做对了）
\n<!DOCTYPE html>\n<html lang="en">\n<head>\n <meta charset="UTF-8">\n <title>Title</title>\n <script src="https://unpkg.com/vue@2"></script>\n</head>\n<body>\n\n<div id="app">\n {{hello}}\n</div>\n\n<script>\n // this is how I used to do it in Vue2 if I remember correctly\n new Vue({\n el: \'#app\',\n data: {\n hello: "bonjour!"\n }\n // methods, watch, computed, mounted, ...\n })\n</script>\n\n</body>\n</html>\n(*) 我实际上使用Quasar 框架，但这并没有改变我问题的核心。
\n根据官方文档，您无法使用 CDN 来使用脚本设置：
<script setup>是一个编译时语法糖，用于在单文件组件 (SFC) 中使用组合 API
但您可以在页面脚本中使用设置挂钩，如下所示：
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>| 归档时间： |
|
| 查看次数： |
840 次 |
| 最近记录： |