试图让 Kendo UI 包装器在 Nuxt 中工作答案

【问题标题】：Trying to get Kendo UI wrappers working in Nuxt试图让 Kendo UI 包装器在 Nuxt 中工作
【发布时间】：2018-07-06 13:29:13
【问题描述】：

这里有一个让 Nuxt 运行的基本教程： https://github.com/nuxt-community/starter-template 。我喜欢 Nuxt 提供的所有东西；结构等

接下来是从这里安装 Kendo 的东西： https://www.telerik.com/kendo-vue-ui/getting-started/

npm install --save @progress/kendo-ui npm install --save @progress/kendo-theme-default npm install --save @progress/kendo-dateinputs-vue-wrapper

我已经尝试将步骤放到 index.vue 页面中

（为了减少代码，已经从底部删除了样式）

<template>
  <section class="container">
    <div>
      <app-logo/>
      <h1 class="title">
        vtest2
      </h1>
      <h2 class="subtitle">
        Nuxt.js project
      </h2>
      <div class="links">
        <a
          href="https://nuxtjs.org/"
          target="_blank"
          class="button--green">Documentation</a>
        <a
          href="https://github.com/nuxt/nuxt.js"
          target="_blank"
          class="button--grey">GitHub</a>
      </div>
      <kendo-calendar :value="new Date()"></kendo-calendar>
    </div>
  </section>
</template>

<script>
import AppLogo from '~/components/AppLogo.vue'
import '@progress/kendo-ui'
import '@progress/kendo-theme-default/dist/all.css'
import { Calendar } from '@progress/kendo-dateinputs-vue-wrapper'


export default {
  components: {
    AppLogo,
    Calendar
  }
}
</script>

<style>
</style>

当我运行 npm run dev 时，它会编译，但是当我打开页面时，我得到：

参考错误窗口未定义 node_modules\@progress\kendo-ui\js\kendo.core.js

 });

            return observable;
        };

    })(jQuery, window);

    return window.kendo;

    }, __webpack_require__(3));

我做错了什么？

【问题讨论】：

我猜你不能在 SSR 中使用剑道 ui
vuetify 将是一个很好的替代方案，可以与 SSR 和 nuxt 一起使用

标签： vue.js kendo-ui nuxt.js

【解决方案1】：

Kendo for Vue 不支持服务器端渲染，但你可以创建一个插件，然后在 nuxt.config.js 文件中添加它，客户端模式 .

查看示例。

/plugins/kendoui.js

import Vue from 'vue'
import '@progress/kendo-ui'
import '@progress/kendo-theme-default/dist/all.css'

import {
  KendoGrid,
  KendoGridInstaller,
  KendoGridColumn
} from '@progress/kendo-grid-vue-wrapper'
import {
  KendoDataSource,
  KendoDataSourceInstaller
} from '@progress/kendo-datasource-vue-wrapper'

Vue.use(KendoGridInstaller)
Vue.use(KendoDataSourceInstaller)

nuxt.config.js

plugins: [{
    src: '~/plugins/kendoui.js',
    mode: 'client'
}],

这对我有用。

【讨论】：

这对我有用，在我的页面中使用插件： import { Gantt } from '@progress/kendo-gantt-vue-wrapper' components: {'gantt': Gantt },跨度>

【解决方案2】：

Kendo for Vue 不支持服务器端渲染和 Nuxt，因为它需要 window 对象。

【讨论】：