Question

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

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

Answer 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>

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

1 个答案: