Kendo UI R3 2020 SP2試用版下載

本文將為大家介紹如何使用Kendo UI在Vue.js中構(gòu)建一個(gè)氣候視圖UI組件，并完成與圖表組件的界面。

首先讓我們一起來(lái)了解一下背景。

什么是Kendo UI？

Kendo UI是一個(gè)全面的Web用戶界面框架，其中包含JavaScript UI組件的集合，這些JavaScript UI組件具有jQuery庫(kù)以及Vue、React和Angular等更現(xiàn)代的庫(kù)。 Kendo UI開(kāi)發(fā)人員使用大量的UI小部件和數(shù)據(jù)可視化組件來(lái)構(gòu)建交互式且響應(yīng)迅速的高性能應(yīng)用程序。

為什么選擇Kendo UI？

使用Kendo UI，您可以輕松地將真正高級(jí)的UI組件添加到您選擇庫(kù)的前端項(xiàng)目中，不必?fù)?dān)心接口的關(guān)鍵功能，而且可以節(jié)省時(shí)間，只需關(guān)注專(zhuān)有功能即可。 Kendo UI附帶了易于使用的集成，支持您喜歡的每個(gè)前端Web框架（例如Vue.js）。

除基本的UI組件外，Kendo UI還為您提供了高級(jí)的數(shù)據(jù)可視化UI元素，可確保您不必向項(xiàng)目中添加其他庫(kù)即可處理圖表，這些高級(jí)UI元素也可自定義。

你會(huì)構(gòu)建什么？

您將使用Kendo UI在Vue.js中構(gòu)建氣候視圖UI組件，將首先使用VS Code中的Kendo UI starter擴(kuò)展scaffolding，然后使用Vue Router創(chuàng)建路由，最后使用一些Kendo UI圖表組件來(lái)構(gòu)建界面。

入門(mén)指南

假設(shè)您已經(jīng)安裝了Vue； 如果沒(méi)有，請(qǐng)轉(zhuǎn)到安裝指南。現(xiàn)在打開(kāi)您的VS Code，要做的第一件事是安裝Kendo UI模板向?qū)?擴(kuò)展。您可以通過(guò)轉(zhuǎn)到VS Code的擴(kuò)展程序標(biāo)簽并搜索 “Kendo UI Template”來(lái)實(shí)現(xiàn)，繼續(xù)下載，重新啟動(dòng)VS Code之后，現(xiàn)在可以使用它來(lái)搭建新項(xiàng)目了。

如何使用

• 打開(kāi)VSCode
• 在Windows / Linux中按ctrl + shift + p，在Mac中按??P打開(kāi)VSCode的擴(kuò)展程序啟動(dòng)器
• 輸入/選擇Kendo UI Template Wizard：?jiǎn)?dòng)并按Enter啟動(dòng)擴(kuò)展

您可以先選擇一個(gè)項(xiàng)目名稱(chēng)和一個(gè)文件夾來(lái)開(kāi)始，單擊Next時(shí)，系統(tǒng)會(huì)提示您選擇要使用的前端庫(kù)，Kendo UI具有Vue、Angular和React的組件元素。

下一步是選擇新項(xiàng)目中所需的頁(yè)面，對(duì)于此項(xiàng)目，您可以選擇一個(gè)帶有路由的圖表。選擇之后，模板向?qū)⒃诤笈_(tái)運(yùn)行Vue create命令，并為您搭建Vue應(yīng)用程序。

配置

既然已經(jīng)完成了應(yīng)用程序的scaffolding工作，那么您必須通過(guò)運(yùn)行以下命令來(lái)確保正確安裝了所有依賴項(xiàng)：

cd newapp
npm install

導(dǎo)航到新應(yīng)用程序的根目錄，并在main.js文件中，確保它看起來(lái)是這樣：

import Vue from 'vue'
import App from './App.vue'
import router from "./router";
Vue.config.productionTip = false
new Vue({
render: h => h(App),
router
}).$mount('#app')

您可以看到路由已引入到項(xiàng)目中，如果您沒(méi)有使用Kendo UI template wizard或選擇了一個(gè)空白項(xiàng)目，則可以在項(xiàng)目終端中使用以下命令輕松添加路由：

vue add router

在app.vue文件中，將內(nèi)容替換為以下代碼塊：

<template>
<div id="root">
<div class="content">
<router-view></router-view>
</div>
</div>
</template>
<script>
export default {
name: 'app',
components: {
}
}
</script>

現(xiàn)在已將導(dǎo)入的路由引入這里，如果打開(kāi)路由文件夾，將看到已在其中注冊(cè)路由的路由腳本（index.js）。 確保您的外觀如下所示：

import Vue from "vue";
import Router from "vue-router";
import Home from "../components/Home";
import Chart1 from "../components/Chart1";
import Chart2 from "../components/Chart2";
Vue.use(Router);
export default new Router({
mode: "history",
routes: [
{
path: "/",
name: "Home",
component: Home
}
,{
path: "/Chart1",
name: "Chart1",
component: Chart1
},{
path: "/Chart2",
name: "Chart2",
component: Chart2
}
]
});

現(xiàn)在，當(dāng)您查看app.vue文件時(shí)，將看到這些定義的路由引入的位置。要定義這些單獨(dú)的路由，請(qǐng)導(dǎo)航到components文件夾。您將看到很多組件，刪除所有組件，僅保留主組件。

添加單個(gè)組件

您的主組件home.vue應(yīng)如以下代碼塊所示：

<template>
<div class="container mt-5">
<div class='row'>
<div class='col-12'>
<h1 class='welcome mb-0'>Global Climate Vue Application</h1>
<h2 class='sub-header mt-0'>Get information about climate conditions of any region in the world with one click</h2>
</div>
</div>
<div class='row'>
<div class='col-12'>
<h1 class='get-started'>Pick a Subject</h1>
</div>
</div>
<div class='row justify-content-center'>
<div class='col-6 text-right'>
<div class='kendoka-div'>
<img class='kendoka' src="../assets/images/kendoka-vue.svg" alt='kendoka' />
</div>
</div>
<div class='col-6 components-list'>
<p>
<img src="../assets/images/components.svg" alt='components' /> 
<router-link to="/Chart1">World Population</router-link>
</p>
<p>
<img src="../assets/images/styles.svg" alt='styles' />
<router-link to="/Chart1">Afforestation</router-link>
</p>
<p>
<img src="../assets/images/blogs.svg" alt='blogs' />
<router-link to="/Chart1">Elevation</router-link>
</p>
<p>
<img src="../assets/images/tutorials.svg" alt='tutorials' />
<router-link to="/Chart1">Topography</router-link>
</p>
<p>
<img src="../assets/images/styles.svg" alt='styles' />
<router-link to="/Chart1">Vegetation</router-link>
</p>
<p>
<img src="../assets/images/components.svg" alt='components' /> 
<router-link to="/Chart1">Prevailing Winds</router-link>
</p>
</div>
</div>
</div>
</template>
<script>
export default {
data: function() {
return {
publicPath: process.env.BASE_URL
}
}
}
</script>

添加路線圖

您可能會(huì)遇到錯(cuò)誤，可能會(huì)詢問(wèn)您在路由腳本中定義的路由。 要?jiǎng)?chuàng)建這些文件，請(qǐng)?jiān)赾omponents文件夾中創(chuàng)建一個(gè)chart1.vue文件，并在其中復(fù)制以下代碼塊：

<template>
<div class='container-fluid'>
<div class='row my-4 mt-5'>
<div class='col-12 col-lg-9 border-right' >
<div v-if="loading" class="k-loading-mask">
<span class="k-loading-text">Loading</span>
<div class="k-loading-image"></div>
<div class="k-loading-color"></div>
</div>
<Chart :title-text="'World Population'" 
:title-font="'19pt sans-serif'" 
:title-margin-bottom="50" 
:legend-position="'bottom'"
:series="series"
:theme="'sass'">
</Chart>


</div>

<div class='col-12 col-lg-3 mt-3 mt-lg-0'>
<h2>View by Continent</h2>
<ul>
<li>
<h3><router-link to="/Chart2">Asia</router-link></h3>
</li>
<li>
<h3><router-link to="/Chart2">Africa</router-link></h3>
</li>
<li>
<h3><router-link to="/Chart2">North America</router-link></h3>
</li>
<li>
<h3><router-link to="/Chart2">South America</router-link></h3>
</li>
<li>
<h3><router-link to="/Chart2">Australia</router-link></h3>
</li>
</ul>
</div>
</div>
</div>
</template>
<script>
import '@progress/kendo-ui/js/kendo.dataviz.chart'
import { Chart } from '@progress/kendo-charts-vue-wrapper';
export default {
mounted: function(){
setTimeout(() => {
this.loading = false;
}, 300);
},
components: {
Chart
},
data: function() {
return {
loading: true,
series: [{
type: "pie",
labels: {
visible: true,
format: "p0"
},
connectors: {
width: 0
},
data: [
{ category: 'EUROPE', value: 0.09 },
{ category: 'NORTH AMERICA', value: 0.06 },
{ category: 'AUSTRALIA', value: 0.02 },
{ category: 'ASIA', value: 0.60 },
{ category: 'SOUTH AMERICA', value: 0.06 },
{ category: 'AFRICA', value: 0.17 }
]
}]
}
}
}
</script>

在這里，我們使用Kendo UI圖表組件，該組件帶有一個(gè)特殊的動(dòng)畫(huà)，因?yàn)樗梢愿鶕?jù)大陸人口來(lái)定義大陸。 Kendo UI與Vue完美地集成在一起，您可以在特定組件的Vue返回函數(shù)中添加很多選項(xiàng)。

對(duì)于第二種方法，在components文件夾中創(chuàng)建一個(gè)Chart2.vue文件，然后在其中復(fù)制下面的代碼塊：

<template>
<div style="width: 600px" class="container-fluid col-12 col-lg-9 mt-5">
<h2 style="text-align:center;margin:60px;">Climate Report for Africa</h2>
<div class="climate ">
<h3>Climate control history</h3>
<table class="history">
<tr>
<td class="spark">
<kendo-sparkline :data="pressLogData" :theme="'sass'"></kendo-sparkline>
</td>
<td class="value">980
<span>mb</span>
</td>
</tr>
<tr>
<td class="spark">
<kendo-sparkline :type="'column'"
:data="tempLogData"
:tooltip-format="'{0} %'"
:theme="'sass'">
</kendo-sparkline>
</td>
<td class="value">21
<span>°C</span>
</td>
</tr>
<tr>
<td class="spark">
<kendo-sparkline :type="'area'"
:data="humLogData"
:tooltip-format="'{0} %'"
:theme="'sass'">
</kendo-sparkline>
</td>
<td class="value">32
<span>%</span>
</td>
</tr>
</table>
</div>
<div class="temperature">
<h3>Temperature control</h3>
<div class="stats">
<kendo-sparkline id="temp-range"
:type="'bullet'"
:data="tempRangeData"
:tooltip-visible="false"
:value-axis="tempRangeValueAxisOpt"
:theme="'sass'">
</kendo-sparkline>
</div>
</div>
<div class="conditioner">
<h3>Conditioner working time</h3>
<ul class="pie-list stats">
<li>
MON
<kendo-sparkline id="stats-mon"
:type="'pie'"
:data="[14,10]"
:theme="'sass'">
</kendo-sparkline>
</li>
<li>
TUE
<kendo-sparkline id="stats-tue"
:type="'pie'"
:data="[8,6]"
:theme="'sass'">
</kendo-sparkline>
</li>
<li>
WED
<kendo-sparkline id="stats-wed"
:type="'pie'"
:data="[8,16]"
:theme="'sass'">
</kendo-sparkline>
</li>
<li>
THU
<kendo-sparkline id="stats-thu"
:type="'pie'"
:data="[12,12]"
:theme="'sass'">
</kendo-sparkline>
</li>
<li>
FRI
<kendo-sparkline id="stats-fri"
:type="'pie'"
:data="[6,18]"
:theme="'sass'">
</kendo-sparkline>
</li>
<li>
SAT
<kendo-sparkline id="stats-sat"
:type="'pie'"
:data="[1,23]"
:theme="'sass'">
</kendo-sparkline>
</li>
<li>
SUN
<kendo-sparkline id="stats-sun"
:type="'pie'"
:data="[5,19]"
:theme="'sass'">
</kendo-sparkline>
</li>
</ul>
</div>
</div>
</template>
<script>
import Vue from 'vue'
import '@progress/kendo-ui';
import { KendoSparkline } from '@progress/kendo-charts-vue-wrapper';
Vue.component('kendo-sparkline', KendoSparkline);

export default {
components: {
KendoSparkline
},
data: function() {
return {
pressLogData: [
936, 968, 1025, 999, 998, 1014, 1017, 1010, 1010, 1007,
1004, 988, 990, 988, 987, 995, 946, 954, 991, 984,
974, 956, 986, 936, 955, 1021, 1013, 1005, 958, 953,
952, 940, 937, 980, 966, 965, 928, 916, 910, 980
],
tempLogData: [
16, 17, 18, 19, 20, 21, 21, 22, 23, 22,
20, 18, 17, 17, 16, 16, 17, 18, 19, 20,
21, 22, 23, 25, 24, 24, 22, 22, 23, 22,
22, 21, 16, 15, 15, 16, 19, 20, 20, 21
],
humLogData: [
71, 70, 69, 68, 65, 60, 55, 55, 50, 52,
73, 72, 72, 71, 68, 63, 57, 58, 53, 55,
63, 59, 61, 64, 58, 53, 48, 48, 45, 45,
63, 64, 63, 67, 58, 56, 53, 59, 51, 54
],
tempRangeData: [21, 23],
tempRangeValueAxisOpt: {
min: 0,
max: 30,
plotBands: [{
from: 0, to: 15, color: '#787878', opacity: 0.15
}, {
from: 15, to: 22, color: '#787878', opacity: 0.3
}, {
from: 22, to: 30, color: '#787878', opacity: 0.15
}]
}
}
}
}
</script>
<style>
.temperature, .conditioner {
margin: 0;
padding: 30px 0 0 0;
}
.history {
border-collapse: collapse;
width: 100%;
}
.history td {
padding: 0;
vertical-align: bottom;
}
.history td.spark {
line-height: 30px;
}
.history td.value {
font-size: 1.6em;
font-weight: normal;
line-height: 50px;
}
.history td.value span {
font-size: .5em;
vertical-align: top;
line-height: 40px;
}
.stats {
text-align: center;
}
.pie-list {
margin: 0;
padding: 0;
list-style-type: none;
}
.pie-list li {
display: inline-block;
text-align: center;
width: 34px;
font-size: 12px;
}
#stats-mon,
#stats-tue,
#stats-wed,
#stats-thu,
#stats-fri,
#stats-sat,
#stats-sun {
display: block;
width: 40px;
line-height: 35px;
}
#temp-range {
width: 100%;
line-height: 40px;
}
</style>

第二條路線使用Kendo UI Sparkline組件描繪氣候條件，將所有內(nèi)容捆綁在一起，您現(xiàn)在可以使用以下命令在開(kāi)發(fā)服務(wù)器中運(yùn)行該應(yīng)用程序：

npm run serve

您將擁有一個(gè)具有路由功能和所有預(yù)定義圖表功能完善的UI組件。

結(jié)論

這篇文章介紹了針對(duì)Vue.js的Kendo UI，以及如何使用Kendo UI模板向?qū)лp松啟動(dòng)Vue項(xiàng)目。 它還顯示了實(shí)現(xiàn)Vue路由并將Kendo UI組件引入Vue項(xiàng)目是多么輕松。