这里有一个使用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的ReferenceError窗口
});
return observable;
};
})(jQuery, window);
return window.kendo;
}, __webpack_require__(3));我做错了什么?
发布于 2020-01-22 22:42:18
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'
}],这对我来说很有效。
发布于 2018-07-08 18:17:52
Kendo for Vue不支持服务器端渲染和Nuxt,因为它需要window对象。
https://stackoverflow.com/questions/51211515
复制相似问题