首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >尝试让Kendo UI包装器在Nuxt中工作

尝试让Kendo UI包装器在Nuxt中工作
EN

Stack Overflow用户
提问于 2018-07-06 21:29:14
回答 2查看 461关注 0票数 1

这里有一个使用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页面

(我从底部删除了样式,只是为了减少代码)

代码语言:javascript
复制
<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的ReferenceError窗口

代码语言:javascript
复制
 });

            return observable;
        };

    })(jQuery, window);

    return window.kendo;

    }, __webpack_require__(3));

我做错了什么?

EN

回答 2

Stack Overflow用户

发布于 2020-01-22 22:42:18

Kendo for Vue不支持服务器端渲染,但您可以创建一个插件,然后在nuxt.config.js文件中必须将其添加到客户端模式中。

请参见示例。

/plugins/kendoui.js

代码语言:javascript
复制
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

代码语言:javascript
复制
plugins: [{
    src: '~/plugins/kendoui.js',
    mode: 'client'
}],

这对我来说很有效。

票数 2
EN

Stack Overflow用户

发布于 2018-07-08 18:17:52

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

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/51211515

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档