如何使用简单的“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。 当您尝试在同一页面上多次实施它时，您会遇到麻烦。