如何使用简单的“a”标签在现有网站中包含使用 npm 和 webpack 构建的 vuejs 应用程序？

Question

i am building a small web app, i have used vue.js router,npm,webpack and all to build like a single page web app. now i want to include it to my existing website by just adding a new navigation menu tab with the app name, by clicking on the tab it has to open my app. like a tab in website how can i do this? i really like webpack workflow. i dont want to build the app into my website using normal vue method. can i combine my app and website by include an app tab in my website?

Answer 1

I'm making the assumption that the rest of your site is not using Vue and that you want to make it so that when you click on 'Vue App' in the nav you want the contents of that page to be a Vue app.

Yes you can do this, just include your script on the page you want to make use vue. You should be able to do this by following https://v2.vuejs.org/v2/guide/index.html .

File 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 (include this file in webpack)

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

Vue doesn't really care where it's implemented, when it comes down to it it's just javascript. Where you will run into trouble is when you try and implement it several times on the same page.