[英]ag-grid-vue module not found even though it's in node_modules
我正在遵循 Vue.js AgGrid 入門指南,一步一步: https ://www.ag-grid.com/vuejs-grid/
一旦我添加<script>
部分並保存,我就會收到以下錯誤:
ERROR Failed to compile with 1 errors 12:01:18 PM
This dependency was not found:
* ag-grid-vue in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=script&lang=js&
To install it, you can run: npm install --save ag-grid-vue
Type checking in progress...
No type errors found
Version: typescript 3.5.3
Time: 1125ms
問題是我已經安裝了它,使用指南中的命令:
npm install --save ag-grid-community ag-grid-vue vue-property-decorator
我已經檢查了 node_modules,一切似乎都在那里。 到目前為止,這是我在 App.vue 中的代碼:
<template>
<ag-grid-vue style="width: 500px; height: 500px;"
class="ag-theme-balham"
:columnDefs="columnDefs"
:rowData="rowData">
</ag-grid-vue>
</template>
<style lang="scss">
@import "../node_modules/ag-grid-community/dist/styles/ag-grid.css";
@import "../node_modules/ag-grid-community/dist/styles/ag-theme-balham.css";
</style>
<script>
import {AgGridVue} from "ag-grid-vue";
export default {
name: 'App',
data() {
return {
columnDefs: null,
rowData: null
}
},
components: {
AgGridVue
},
beforeMount() {
this.columnDefs = [
{headerName: 'Make', field: 'make'},
{headerName: 'Model', field: 'model'},
{headerName: 'Price', field: 'price'}
];
this.rowData = [
{make: 'Toyota', model: 'Celica', price: 35000},
{make: 'Ford', model: 'Mondeo', price: 32000},
{make: 'Porsche', model: 'Boxter', price: 72000}
];
}
}
</script>
知道發生了什么嗎? 在 MacOS Catalina 上,如果這很重要,並使用最新的 LTS 版本的 Node(今天早上剛下載)。 我還嘗試卸載和重新安裝節點(“完整”方式也刪除所有隱藏的節點文件夾和內容,然后從站點重新安裝)。
看起來好像 ag-grid 入門文檔已經過時了。 現在要安裝的正確軟件包基於模塊。
例如在package.json
依賴項下:
"@ag-grid-community/all-modules": "~22.1.0",
"@ag-grid-community/client-side-row-model": "~22.1.0",
"@ag-grid-community/core": "~22.1.0",
"@ag-grid-community/csv-export": "~22.1.0",
"@ag-grid-community/infinite-row-model": "~22.1.0",
"@ag-grid-community/vue": "~22.1.0",
"@ag-grid-enterprise/all-modules": "~22.1.0",
然后在組件的<script>
:
import {AgGridVue} from "@ag-grid-community/vue";
import {AllCommunityModules} from '@ag-grid-community/all-modules';
在export default
下的“數據”中:
data() {
return {
columnDefs: null,
rowData: null,
modules: AllCommunityModules
}
},
最后在<template>
:
<template>
<ag-grid-vue style="width: 500px; height: 500px;"
class="ag-theme-balham"
:columnDefs="columnDefs"
:rowData="rowData"
:modules="modules">
</ag-grid-vue>
</template>
從https://www.ag-grid.com/javascript-grid-modules/#installing-ag-grid-modules得到了很多幫助。 他們真的需要更新他們的入門頁面!
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.