Saya menulis (amatur) aplikasi Vue3 (*) dengan bootstrap kandungan projek dan kemudian membinanya untuk penggunaan. keputusan baik.
Saya perlu mencipta halaman HTML tunggal kendiri yang boleh dimuatkan terus dalam penyemak imbas. Saya melakukan ini beberapa tahun yang lalu apabila saya mula menggunakan Vue (semasa peralihan v1 → v2) dan saya segera menemui dokumentasi yang betul.
Saya tidak menemui API Vue3 dan Komposisi yang serupa.
Apakah halaman bingkai yang akan memaparkan nilai pembolehubah reaktif {{hello}} （我将在完整的构建应用程序的上下文中在 <script setup> seperti yang ditakrifkan dalam)
Beginilah saya pernah melakukannya (saya harap saya melakukannya dengan betul)
<!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>
(*) Saya sebenarnya menggunakan rangka kerja Quasar, tetapi itu tidak mengubah inti masalah saya.
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Menurut dokumentasi rasmi, anda tidak boleh menggunakan CDN untuk menggunakan tetapan skrip 一>:
Tetapi anda boleh menggunakan cangkuk tetapan dalam skrip halaman seperti ini:
const { createApp, ref } = Vue; const App = { setup() { const hello = ref('Bonjour') return { hello } } } const app = createApp(App) app.mount('#app')