Question

我正在构建一个小型Web应用程序，我使用了vue.js路由器，npm，webpack以及所有构建类似单页面Web应用程序。现在我想通过添加一个带有应用名称的新导航菜单选项卡将其包含到我现有的网站中，方法是单击它打开我的应用程序所需的选项卡。 like a tab in website 我怎样才能做到这一点？我真的很喜欢webpack工作流程。我不想使用普通的vue方法将应用程序构建到我的网站中。我可以通过在我的网站中添加应用标签来结合我的应用和网站吗？

Answer 1

我假设您网站的其余部分没有使用Vue并且您想要这样做，以便当您在导航中点击“Vue App”时，您希望该网页的内容为Vue应用

是的，您可以这样做，只需在要使用vue的页面上包含您的脚本即可。您应该可以按照https://vuejs.org/v2/guide/index.html。

执行此操作

File VueApp.html

<body>
  <h1 id="panneau">Panneau de score</h1>
  <div id="center">
    <div class="temps" id="temps">0:00</div>
    <div class="score" id="score">0</div>
    <div class="scoreDeux" id="scoreDeux">0</div>
    <h2 id="Locaux">Locaux</h2>
    <h2 id="Visiteurs">Visiteurs</h2>
  </div>
  <center><img id="EquiLogo" src="http://placehold.it/100" alt="Equinoxe Logo" /></center>
</body>

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

<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

Vue并不关心它的实现位置，当它归结为它只是javascript。遇到麻烦的地方是你在同一页上多次尝试实施它。

如何在现有网站中使用npm和webpack包含vuejs应用程序构建，其中包含一个简单的＆＃39; a＆＃39;标签？

1 个答案: