【问题标题】:Is it possible to use ag-grid with vue without a builder?是否可以在没有构建器的情况下将 ag-grid 与 vue 一起使用?
【发布时间】:2019-10-13 13:08:32
【问题描述】:

特别是,ag-grid-vue 组件的 typescript 源是否可以编译然后包含在常规 html 文件中?

【问题讨论】:

    标签: vuejs2 ag-grid


    【解决方案1】:

    我找到了一种不修改源代码的方法。在 ag-grid-vue.umd.js 的顶部附近,您可以看到该模块执行此操作:

    root["ag-grid-vue"] = factory(root["Vue"], root["agGrid"]);
    

    这里,“root”是窗口,工厂调用的结果就是你想要的。但是由于破折号,您无法直接访问它。但是您可以使用字典语法(或其他任何名称):

    let agVueObj = window["ag-grid-vue"];
    //The component is a field on this object:
    let AgGridVue = agVueObj.AgGridVue;
    //Then register it as a component in your Vue instance:
    //components: { AgGridVue }
    

    你应该可以使用<ag-grid-vue>标签。

    【讨论】:

      【解决方案2】:

      我想通了:

      下载ag-grid源代码,进入packages/ag-grid-vue目录并执行npm installnpm run build。这会将已编译的 javascript 模块放在 dist 目录中,无需构建系统即可使用。

      我确实必须稍微修改构建的 javascript 以将 AgGridVue 对象放入全局命名空间,因为我没有使用模块加载器。

      编辑: 要将AgGridVue 放入全局命名空间,请将window.AgGridVue = AgGridVue; 添加到在ag-grid-vue.umd.js 中返回AgGridVue 的函数的末尾

      【讨论】:

      • 嗨,我正在尝试做同样的事情。你在ag-grid-vue.umd.js 中改变了什么?谢谢!
      • 在返回AgGridVue 的函数末尾,我将window.AgGridVue = AgGridVue; 行添加到我可以从我的代码访问的命名空间中。可能有更好的方法来做到这一点,但我还不太了解模块加载器。
      • 非常感谢您的回复。不确定最好的解决方案是什么,但至少它有效:)
      • 谢谢你,我花了过去 3 天时间搜索他们的文档以寻找一个例子。我正要完全按照您在这里所做的那样做,但感谢您至少确认这是唯一的选择。干杯
      猜你喜欢
      • 2020-03-24
      • 2016-07-27
      • 2020-12-10
      • 2018-09-15
      • 1970-01-01
      • 2017-09-07
      • 1970-01-01
      • 1970-01-01
      • 2013-10-29
      相关资源
      最近更新 更多