将现有的静态html网站集成到现有的vue js web应用程序中
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了将现有的静态html网站集成到现有的vue js web应用程序中相关的知识，希望对你有一定的参考价值。
我用vue和vuetify创建了一个联系表单作为一个新的vue项目。现在我想将它集成到现有的静态html页面中。我试图将vue应用程序添加为vue实例，这似乎不是正确的方法。现有的html＆css代码更容易进入新的轻量级vue项目设置吗？
你能推荐一个简单的github项目作为一个例子，其中包括vue作为现有网站的实例吗？
答案
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 web应用程序中的主要内容，如果未能解决你的问题，请参考以下文章
如何使用 Vue.js 将 DataTable() 与数组中的数据（v-for 循环）附加到现有的 HTML <table>？