将现有的静态html网站集成到现有的vue js网络应用中

时间:2019-04-08 21:41:16

标签: vue.js vuejs2 vue-component vuetify.js

我创建了一个带有vue的联系表单,并将vuetify作为一个新的vue项目。现在,我想将其集成到现有的静态html页面中。 我试图将vue应用程序添加为vue实例,但这似乎不是正确的方法。 现有的html和CSS代码进入新的轻量级Vue项目设置会更容易吗?

您能否推荐一个简单的github项目作为示例,其中将vue作为实例添加到现有网站中?

1 个答案:

答案 0 :(得分:1)

Vue的赞誉有很多原因,但是最杰出的原因之一就是其可扩展性。您可以仅将Vue用于呈现按钮或创建大型应用程序。

所有您需要的是加载vue.js并使用其id定位app元素。 Vue不在乎该元素之外的内容(但是可以访问页面的其余部分,如果需要的话)。您甚至可以在同一页面上拥有多个Vue实例。

示例:

<div id="contactForm">
  <div v-text="limits" :style="appStyle"></div>
</div>
<p>You can have any html outside your vue app, it will display... normally. 
</p>
<p>You can place your vue instance anywhere you want, as long as the element you instantiate it on exists in DOM when you try to instantiate it.
<p>And <code>vue.js</code> has to be loaded before you call the constructor. That's about it.</p>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
  new Vue({
    el: '#contactForm',
    computed: {
      limits(){ return 'There are no limits.' },
      appStyle() { return {
          color: 'red',
          border: '1px solid #ddd'
        }
      } 
    }
  });
</script>