Question

1：我做了已安装的expressjs。 2：我使用npm install vue --save安装了vue框架 3：我使用handlebar作为expressjs的模板引擎

在index.hbs之后，这是代码：

<h1>{{title}}</h1>
<p>Welcome to {{title}}</p>
<p>\{{title2}}</p>
<script>
    new Vue({
        el: "#app",
        data: {
            title2: "Hello World"
        }
    });
</script>

现在我想用vue来执行那个脚本但是我尝试了layout.hbs中的东西但是我不知道如何包含vue所以我只是从cdnjs中添加了vue。

还有一个问题我补充说，头部无法包含在正文中，因为hbs的模板渲染不执行脚本。

现在第二件事就是当我想在users.hbs中使用vue时，我必须再次创建Vue实例，并继续使用更多的页面。

它重复代码并且很难管理。

所以任何方式？我不必每次都创建实例，而且我不需要在cdn的head标签中包含脚本？

很抱歉忘了这个，如果我在app.js中添加Vue新实例，那么这就是警告：

[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.
(found in <Root>)

这是layout.hbs

<!DOCTYPE html>
<html>
  <head>
    <title>{{title}}</title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
      <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.2/vue.min.js"></script>
  </head>
  <body>
    <div id="app">
        {{{body}}}
    </div>
  </body>
</html>

谢谢

Answer 1

FOR SSR 我建议使用NUXT.js因为他们已经安装了快速集成系统。使用axios进行http请求。

FOR CSR 我建议分别建立2个项目，1个你有vuejs和另一个nodejs。然后让他们使用axios进行通信，为此您可以使用EXPRESS或RESTIFY。

Answer 2

我有同样的问题，在开始自己解决问题之前偶然发现了这个问题。

最后，我使用默认的快速生成器应用程序+构建脚本将.vue文件转换为捆绑包，以便我可以在我的视图文件中使用它们。

我写了一篇关于要采取的步骤的小帖子： https://mindthecode.com/using-vue-components-in-your-express-app/

希望它有所帮助。

使用Vue与Express的最佳方式？

2 个答案: