Vue 中的 Ag-Grid 没有 npm 安装示例？

Question

我想在不安装 npm 的情况下使用 ag-grid-vue。

代码：https://codepen.io/riodw/pen/zYYOjdE

---

所以我发现了这个：Is it possible to use ag-grid with vue without a builder?。遵循该指南，并且基本上能够获得要渲染的内容，但它卡在“正在加载...”

1. 我下载了 ag-grid（来自这里：https://github.com/ag-grid/ag-grid）
2. 进入cd ag-grid-master/packages/ag-grid-vue
3. npm 已安装npm install
4. 然后构建npm run build

这会生成“ag-grid-vue.umd.js”文件。
修改该文件以将 AgGridVue 放在返回 AgGridVue 的窗口上：

window.AgGridVue = AgGridVue;
return AgGridVue;

然后将该文件包含在 ag-grid-community 文件中：

<script src="https://cdnjs.cloudflare.com/ajax/libs/ag-grid/21.2.1/ag-grid-community.min.js"></script>
<script src="/global/js/ag-grid/ag-grid-vue.umd.js"></script>

还有 ag-grid 渲染！
问题是它在加载时卡住了，我不知道是否有解决方案。
有没有可能在这里提供帮助？
任何帮助都会很棒。如果不是，我将不得不使用其他东西，因为不幸的是，安装不是我的选择。

渲染图：

调试模式codepen：
https://cdpn.io/riodw/debug/zYYOjdE/LDkmdEDdQpzA

Answer 1

你所做的一切都是正确的，除了一件小事。

我找到了解决办法，当我使用vue.js（不是缩小版）时，Vue本身就抛出了警告；

表示，在“ag-grid-vue”标签中，不应该使用如下的:rowData；

<ag-grid-vue :rowData="rowData" :columnDefs="columnDefs"/>

这种用法是错误的，正如 Vue 的控制台警告中所述。

您应该使用 kebab-case 而不是 camel-case，如下所示；

<ag-grid-vue :row-data="rowData" :column-defs="columnDefs"/>

这实际上按预期工作。

我相信，camel-case 在存在模块加载器的环境中工作。