如何在Nuxt应用程序中使用ag-grid

npm install --save ag-grid-community ag-grid-vue

<template>
  <div>
    <ag-grid-vue
      style="width: 100%; height: 500px;"
      class="ag-theme-alpine"
      :columnDefs="columnDefs"
      :rowData="rowData"
    ></ag-grid-vue>
  </div>
</template>

<script>
import { AgGridVue } from 'ag-grid-vue';

export default {
  components: {
    AgGridVue,
  },
  data() {
    return {
      columnDefs: [
        { headerName: 'Make', field: 'make' },
        { headerName: 'Model', field: 'model' },
        { headerName: 'Price', field: 'price' },
      ],
      rowData: [
        { make: 'Toyota', model: 'Celica', price: 35000 },
        { make: 'Ford', model: 'Mondeo', price: 32000 },
        { make: 'Porsche', model: 'Boxster', price: 72000 },
      ],
    };
  },
};
</script>

<style>
@import '~ag-grid-community/dist/styles/ag-grid.css';
@import '~ag-grid-community/dist/styles/ag-theme-alpine.css';
</style>

<template>
  <div>
    <h1>My Nuxt Page</h1>
    <AgGridTable />
  </div>
</template>

<script>
import AgGridTable from '~/components/AgGridTable.vue';

export default {
  components: {
    AgGridTable,
  },
};
</script>