【问题标题】：Use of Vue in combination with handlebars and Node/Express结合车把和 Node/Express 使用 Vue
【发布时间】：2020-01-17 07:04:09
【问题描述】：
我开发了一个 CMS。这是一个 Vue SPA。这将连接到 Express/Node 服务器，该服务器通过请求以 JSON 的形式向其提供 API 内容。但是现在我需要建立主站点。我决定在车把上做这件事，因为我不希望这个页面成为一个 SPA，而是我希望它成为一个具有不同页面等的更传统的站点。我还购买了一个用于这个主站点的模板.据我了解，这个模板适用于车把，因为它包含一些像 jquery 这样的 javascript 文件，如果我将其设为 vue 应用程序，这些文件会发生冲突。我的理解正确吗？或者我可以使用 vue 来制作一个不是 spa 并且还包含其他 javascript 文件的网站。我问这个的原因是因为我需要为主站点开发一些类似组件的小功能，我更愿意在 Vue 中编写代码。这让我想到了最后一个问题，是否可以在车把中使用 Vue 组件。我可以安装/创建可以加载到其中的组件吗？
任何对我理解的帮助都将不胜感激，因为虽然我觉得我在 SPA 的上下文中理解 vue，它为 JSON 发出 API 请求。我真的不明白如何将它用于可以放置在其他网页中的小型定制组件，或者我是否可以使用 Vue 来开发非 SPA 形式的网站。谢谢。
【问题讨论】：
标签：
express
vue.js
handlebars.js
【解决方案1】：
您不需要将vue-router 导入到 Vue 项目中。这就是使它成为 SPA 的原因。
您的设置中最简单的方法可能是在没有构建过程的情况下运行 Vue。只需导入带有<script> 标签的vue.min.js，您就可以直接使用Vue.component() 定义您的组件。然后，您可以使用 new Vue({ el: "#app" }); 运行 Vue 应用程序，并且组件正在构建中。您还可以在同一页面上拥有多个 Vue 实例。所以，这里有一个例子：
Vue.component('demo', {
template: `
<ul>
<li v-for="item in data" :key="item">{{ item }}</li>
</ul>`,
data () {
return {
data: [3, 5, 6, 8]
};
}
});
new Vue({ el: '#vue-integration' });
#vue-integration {
border: 2px solid rgba(255, 0, 0, 0.9);
background: rgba(255, 0, 0, 0.1);
width: 80%;
margin: 10px auto 0 auto;
padding: 7px;
}
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
<div class="your-awesome-page">
Your awesome page
<div id="vue-integration">
A vue demo.
<demo></demo>
</div>
</div>