使用Compose API在獨立的(單一檔案)Vue3 SPA中的方法
P粉106711425
P粉106711425 2024-03-26 23:28:38
0
1
388

我透過引導專案內容然後建置它以進行部署來編寫(業餘)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}}
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板