如何在带有简单'a'标签的现有网站中包含带有 NPM 和 webpack 的 Vuejs 应用程序构建？

Question

我正在构建一个小型Web应用程序，我使用了Vue.js Router，NPM，WebPack，所有这些都像单页网络应用程序一样构建。现在，我想通过单击必须打开我的应用程序的选项卡，将其包含在我现有的网站中。像网站上的标签我怎样才能做到这一点？我真的很喜欢WebPack Workflow。我不想使用普通VUE方法将该应用构建到我的网站中。我可以通过在我的网站中包含一个应用选项卡组合我的应用程序和网站吗？

Answer 1

我正在假设您的网站的其余部分不使用VUE，并且您想制作它，以便当您在NAV中单击'Vue App'时，您想要该页面的内容是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。您将遇到麻烦的地方是尝试在同一页面上多次实现它。