在 Rails 应用程序中包含 jquery 插件：未应用样式答案

【问题标题】：Include a jquery plugin in a rails app: styling isn't applied在 Rails 应用程序中包含 jquery 插件：未应用样式
【发布时间】：2019-03-14 09:17:23
【问题描述】：

我正在寻找有关如何让 jquery 插件与 rails 应用程序一起使用的建议。具体来说，我正在尝试运行以下插件，但我也希望获得有关如何完成工作的一般建议。看来您可能必须在 application.js 中要求它并将其放在 vendor/assets/javascript 目录中？我还有什么遗漏吗？

我无法让这个 jquery 插件在我的 Rails 应用程序中工作 https://www.jqueryscript.net/time-clock/Minimal-jQuery-Count-Up-Plugin-CoutUpCircle.html

我以前从未安装过插件，但我下载了 jquery.countupcircle.min.js 文件并将其放在 'vendor/assets/javascripts' 中

在“app/assets/javascripts”中，我更新了下面的 application.js（我应该在 vendor/assets/javascripts 中有另一个这些文件吗？）

//= require jquery
//= require jquery3
//= require jquery_ujs
//= require jquery.countupcircle.min
//= require popper
//= require turbolinks
//= require tether
//= require bootstrap
//= require_tree .

在我的页面上

<div class="container-fluid">
  <div class="row">

    <div class="wrapper">
      <div id="count-box">19</div> 
    </div>

    <script type="text/javascript">
    $(document).ready(function(){
    $('#count-box').CountUpCircle({
    duration: 500, // In ms, default: 5000
    opacity_anim: false,
    step_divider: 1
    });
    });
    </script>

  </div>
</div>

页面上的数字在增加，我看到“19”，但没有圆圈，也没有应用样式。

在我的 styles.css 文件中

  #count-box {
    display: block;
    border: 2px #ccc solid;
    color: #ccc;
    font-size: 4em;
    border-radius: 50%;
    line-height: 200px;
    height: 200px;
    width: 200px;
    text-align: center;
  }

【问题讨论】：

浏览器控制台有什么线索吗？如果你已经将js文件添加到javascripts文件夹中，那么你不需要用require指定它，它会通过require_tree添加。
我不确定那个插件是怎么回事，我尝试了另一个插件，它工作得很好。顺便说一句，当使用 'vender/assets/javascripts' 时，require_tree 似乎不起作用，当我将插件放入 'app/assets/javascripts' 时，它似乎只在不使用 'require' 的情况下工作。因此，基本上对于“供应商/资产/javascripts”，您需要在 application.js 中要求它，但您不必在“应用程序/资产/javascripts”中要求它
您必须将文件放在 app/assets/javascripts 目录中。供应商文件夹中的文件不是以这种方式集成的。你能证实吗？
'vender/assets/javascripts' 旨在分离第三方插件，而 'app/assets/javascripts' 适用于您自己的脚本，对吗？当我将脚本放在 vender/assets/javascripts 下时，除非我在 application.js 中执行“//= require plugin_name”，否则它不会执行，但是如果您想在 app/assets/ 中混合所有第三方和自定义脚本javascripts 那么它就可以工作，而不必在 application.js 中要求它。如果您想在逻辑上将它们分开或不保留 Rails 建议的文件结构，这完全取决于您。

标签： jquery ruby-on-rails

【解决方案1】：

尝试运行 rake assets:precompile 并重新启动服务器。如果仍然无法正常工作，则引导程序将覆盖您的插件类。试试//= require jquery.countupcircle.min 在你需要引导之后

【讨论】：