使用 CDN 为 Vue 安装 Kendo UI答案

【问题标题】：Installing Kendo UI for Vue using CDN使用 CDN 为 Vue 安装 Kendo UI
【发布时间】：2021-09-28 13:33:47
【问题描述】：

我正在尝试按照此页面中的建议使用 CDN 为 Vuejs 实现 Kendo UI：

https://www.telerik.com/kendo-vue-ui/components/framework-wrapper/using-cdn/

这里：

https://www.telerik.com/kendo-vue-ui/components/charts-wrapper/

但是当我尝试这样做时，我收到了以下错误消息：

Uncaught ReferenceError: ChartInstaller is not defined"

这是我尝试过的 jsfiddle：

https://jsfiddle.net/agw1u098/3/

【问题讨论】：

标签： javascript vue.js kendo-ui

【解决方案1】：

你的 jsfiddle 是错误的。 Telerik 的文档很差。要通过 CDN 为 Vue 使用 Kendo UI 包装器，请按如下方式实现。在 Telerik DOJO 上尝试以下代码。

<!DOCTYPE html>
<html>
<head>
    <base href="https://demos.telerik.com/kendo-ui/daterangepicker/date-range">
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <!--Load Kendo styles from the Kendo CDN service-->
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.common.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.default.min.css"/>

    <!--Load the required libraries - jQuery, Kendo, Babel and Vue-->
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2017.3.913/js/kendo.all.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.15/browser-polyfill.min.js"></script>
    <script src="https://unpkg.com/vue/dist/vue.min.js"></script>

    <!--Load the required Kendo Vue package(s)-->
    <script src="https://unpkg.com/@progress/kendo-dateinputs-vue-wrapper/dist/cdn/kendo-dateinputs-vue-wrapper.min.js"></script>
    <script src="https://unpkg.com/@progress/kendo-charts-vue-wrapper/dist/cdn/kendo-charts-vue-wrapper.js"></script>

</head>
<body>
  <div id="kendoChart">
    <kendo-chart :title-text="'Kendo Chart Example'"
             :legend-position="'bottom'"
             :series="series"
             :category-axis-categories="categories"
             :value-axis="axis"
             :theme="'bootstrap'">
    </kendo-chart>
  </div>

<script>  
  new Vue({
    el: '#kendoChart',
    data: function() {
      return {
        series: [
          {
            name: 'Temperature',
            data: [20, 25, 32],
            axis: "temperature"
          },{
            name: 'Humidity',
            data: [40, 50, 80],
            axis: "humidity"
          }
        ],
        categories: ["Aug", "Sep", "Oct"],
        axis: [
          {
            name: "temperature",
            labels: {
              format: "{0}C"
            }
          },{
            name: "humidity",
            labels: {
              format: "{0}%"
            }
          }
        ]
      }
    }
  });
</script>    

</body>
</html>

【讨论】：