将 Vue 与车把和 Node/Express 结合使用

Question

我开发了一个 CMS。这是一个 Vue SPA。这连接到 Express/Node 服务器，该服务器通过请求以 JSON 的形式向其传送 api 内容。但是现在我需要建立主站点。我决定在 handlebars 中进行操作，因为我不希望此页面成为 SPA，而是希望它成为具有不同页面等的更传统的网站。我还购买了一个用于此主网站的模板.据我了解，此模板适用于 handlebars，因为它包含一些 javascript 文件，例如 jquery，如果我要将其制作成 vue 应用程序，这些文件会发生冲突。我的理解是否正确？或者我可以使用 vue 制作一个不是水疗中心并且还包含其他 javascript 文件的网站。我问这个的原因是因为我需要为主站点开发一些类似组件的小功能，我更愿意在 Vue 中编写代码。这让我想到了最后一个问题，是否可以在 handlebars 中使用 Vue 组件。我可以 install/create 可以加载到其中的组件吗？

任何对我的理解的帮助将不胜感激，因为虽然我觉得我在 SPA 的上下文中理解 vue，该 SPA 发出 API 请求 JSON。我真的不明白如何将它用于可以放置在其他网页中的小型定制组件，或者我是否可以使用 Vue 来开发非 SPA 形式的网站。谢谢

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

将 Vue 与车把和 Node/Express 结合使用

Use of Vue in combination with handlebars and Node/Express

express

handlebars.js

vue.js