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

Question

我正在构建一个 Nuxt 应用程序，我正在尝试在我的一个页面中呈现一个 ag-grid

我创建了一个名为 ag-grid.js 的插件：

import * as agGridEnterpise from 'ag-grid-enterprise/main'

agGridEnterpise.LicenseManager.setLicenseKey([MY_LICENSE_KEY])

在 nuxt.config.js 我已经注册了插件：

plugins: [
    //...
    {
      src: '~/plugins/ag-grid.js',
      ssr: false
    }
],

在我的页面组件中我有：

<template>
    <ag-grid-vue ref="table" class="ag-theme-material" 
 :pinnedTopRowData="pinnedRow ? [pinnedRow] : []" :gridOptions="gridOptions" 
 :columnDefs="columnDefs" :rowData="tableData" v-show="!loadingGridData" 
 :cellValueChanged="onCellValueChanged">
    </ag-grid-vue>
</template>
<script>
import { AgGridVue } from 'ag-grid-vue'
export default {
  // ....
  components: {
    'ag-grid-vue': AgGridVue
    // ....
  }
}
</script>

但是当我呈现页面时出现以下错误：

TypeError: Cannot read property 'match' of undefined at Environment.webpackJsonp../node_modules/ag-grid/dist/lib/environment.js.Environment.getTheme (C:\xampp\htdocs\ate_crm_webapp\node_modules\ag-grid\dist\lib\environment.js:76) at GridOptionsWrapper.webpackJsonp../node_modules/ag-grid/dist/lib/gridOptionsWrapper.js.GridOptionsWrapper.specialForNewMaterial (C:\xampp\htdocs\ate_crm_webapp\node_modules\ag-grid\dist\lib\gridOptionsWrapper.js:636) at GridOptionsWrapper.webpackJsonp../node_modules/ag-grid/dist/lib/gridOptionsWrapper.js.GridOptionsWrapper.getHeaderHeight (C:\xampp\htdocs\ate_crm_webapp\node_modules\ag-grid\dist\lib\gridOptionsWrapper.js:352) at GridOptionsWrapper.webpackJsonp../node_modules/ag-grid/dist/lib/gridOptionsWrapper.js.GridOptionsWrapper.getGroupHeaderHeight (C:\xampp\htdocs\ate_crm_webapp\node_modules\ag-grid\dist\lib\gridOptionsWrapper.js:368) at GridPanel.webpackJsonp../node_modules/ag-grid/dist/lib/gridPanel/gridPanel.js.GridPanel.setBodyAndHeaderHeights (C:\xampp\htdocs\ate_crm_webapp\node_modules\ag-grid\dist\lib\gridPanel\gridPanel.js:1193) at GridPanel.webpackJsonp../node_modules/ag-grid/dist/lib/gridPanel/gridPanel.js.GridPanel.init (C:\xampp\htdocs\ate_crm_webapp\node_modules\ag-grid\dist\lib\gridPanel\gridPanel.js:191) at C:\xampp\htdocs\ate_crm_webapp\node_modules\ag-grid\dist\lib\context\context.js:215 at Array.forEach (<anonymous>) at C:\xampp\htdocs\ate_crm_webapp\node_modules\ag-grid\dist\lib\context\context.js:215 at Array.forEach (<anonymous>)

然后我收到 Vue 警告：

[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

found in

---> <AgGridVue>
       //....

有什么线索吗？

Answer 1

ag-grid 未能找到 css。这就是为什么您的 nuxt.config.js 文件需要这些行：

module.exports = {
  css: [
    '@/node_modules/ag-grid/dist/styles/ag-grid.css',
    '@/node_modules/ag-grid/dist/styles/ag-theme-material.css'
  ],
build: ect...

要解决其他回答者问题（如 MouseEvent 错误），请将其添加到构建中：

build: {
  extend (config, context) {
    config.resolve.alias['vue'] = 'vue/dist/vue.common'
  }
}

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

How to use ag-grid in a Nuxt app

ag-grid

vuejs2

nuxt.js