Rails webpack 和 vue答案

【问题标题】：Rails webpack and vueRails webpack 和 vue
【发布时间】：2018-07-06 19:13:31
【问题描述】：

如何使用 Vue 定义一个根组件，它包装了我的整个代码，所以所有其他组件都是该根的后代？

基本上我想实现以下目标：

在 application.html.erb 中

<!DOCTYPE html>
<html>
  <head>
    <title>My App</title>
    <%= csrf_meta_tags %>

    <%= stylesheet_pack_tag    'application' %>
  </head>

  <body>
    <div id="root">
      <%= yield %>
    </div>
    <%= javascript_pack_tag 'application' %>
  </body>
</html>

然后在我的 webpack 入口点上

...    

import Vue from 'vue';

var app = new Vue({
  el: '#root'
 })

但是，当我这样做时，我收到了一条 Vue 警告，上面写着：

[Vue 警告]：您正在使用 Vue 的仅运行时构建，其中模板选项不可用。预编译模板进入渲染函数，或使用编译器包含的构建。

所以，据我了解，发生这种情况是因为我需要将我的 vue 组件放在 .vue 文件中，但是如果我这样做了，我如何仍然使用 yield 语句来实现“rails”的其余视图方式”？

最后，我想，这一切都归结为如何在 rails 中使用 vuejs、仅 webapack（无资产管道）组织我的前端，但仍然使用一些 rails 功能，如 yield 来呈现“正常”视图?

P.S：我已经看到了当你使用 webpack 开始一个新项目时出现的 hello world 示例，但是它很简单......

【问题讨论】：

尝试将 vue: 'vue/dist/vue.js' 添加到您的 webpack 别名中。
我认为你不能做你想做的事——如果你想使用 Rails 视图并让它们呈现，那么 vue 根元素必须不同，否则vue 将用它的渲染内容替换它的内容。您可以在 yield 之前添加另一个元素，这将是您的 vue 的根。但无论哪种方式，我都不确定你想在这里实现什么。如果你只是想使用一些 vue 组件，可以随时随地挂载它们？
@webnoob 谢谢，这工作！它在“树林下”做什么？
@MicaelNussbaumer 我只是按照 webood 所说的做了，它奏效了！
@Nuno 我已经为您添加了答案。我还添加了一些对它的引用来解释我从哪里获得信息（在生成将 HTML 传递到的动态组件时，我遇到了同样的问题）。

标签： ruby-on-rails webpack vue.js

【解决方案1】：

尝试将vue: 'vue/dist/vue.js' 添加到您的 webpack 别名文件中。当我渲染不适合 vue 模板的正常模型（即基于动态的内容）的组件模板时，我必须做同样的事情。

This Evan You（Vue 的创建者）的帖子通过link 解释了仅运行时构建（这是），具体来说，我们正在查看的位是这样的：

仅运行时构建：由于它不包含编译器，因此您需要在编译步骤中预编译模板，或手动编写渲染函数。 npm 包会默认导出这个构建，因为从 npm 使用 Vue 时，您可能会使用编译步骤（使用 Browserify 或 Webpack），在此期间 vueify 或 vue-loader 将执行模板预编译。

这意味着我们通常使用的版本没有编译器，所以我们需要通过别名包含它，然后我们可以访问：

独立构建：包括编译器和运行时。这功能与 Vue 1.x 基本完全相同。

因为它有编译器，它允许编译你的模板，因为它不是标准 Vue 文件模板的一部分。

嗯，这至少是我对整个事情的看法:)

【讨论】：