如何使用簡單的“a”標簽在現有網站中包含使用 npm 和 webpack 構建的 vuejs 應用程序？

Question

我正在構建一個小型 Web 應用程序，我使用了 vue.js 路由器、npm、webpack 和所有這些來構建一個單頁 Web 應用程序。 現在我想將它包含到我現有的網站中，只需添加一個帶有應用程序名稱的新導航菜單選項卡，單擊它必須打開我的應用程序的選項卡。 就像網站上的標簽一樣，我該怎么做？ 我真的很喜歡 webpack 工作流程。 我不想使用普通的 vue 方法將應用程序構建到我的網站中。 我可以通過在我的網站中包含一個應用程序選項卡來組合我的應用程序和網站嗎？

Answer 1

我假設您網站的其余部分沒有使用 Vue，並且您希望這樣做，以便當您在導航中單擊“Vue 應用程序”時，您希望該頁面的內容成為 Vue 應用程序。

是的，您可以這樣做，只需在您要使用 vue 的頁面上包含您的腳本。 您應該可以按照https://v2.vuejs.org/v2/guide/index.html執行此操作。

文件 VueApp.html

<div id="myApp">
  <span v-bind:title="message">
    Hover your mouse over me for a few seconds
    to see my dynamically bound title!
  </span>
</div>
<script src="app.min.js"></script> // Your compiled file from webpack

myApp.js（在 webpack 中包含這個文件）

var app2 = new Vue({
    el: '#myApp', 
    data: {
     message: 'You loaded this page on ' + new Date().toLocaleString()
    }
})

Vue 並不真正關心它在哪里實現，歸根結底它只是 javascript。 當您嘗試在同一頁面上多次實施它時，您會遇到麻煩。