是否可以在没有构建器的情况下将 ag-grid 与 vue 一起使用？

Posted 2023-03-28

【中文标题】是否可以在没有构建器的情况下将 ag-grid 与 vue 一起使用？

【英文标题】：Is it possible to use ag-grid with vue without a builder?

【发布时间】：2019-10-13 13:08:32

【问题描述】：

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

【参考方案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 install和npm 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 天时间搜索他们的文档以寻找一个例子。我正要完全按照您在这里所做的那样做，但感谢您至少确认这是唯一的选择。干杯