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

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

 

什么是Kendo UI？

Kendo UI是一個(gè)全面的Web用戶(hù)界面框架，其中包含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)到安裝指南?，F(xiàn)在打開(kāi)您的VS Code，要做的第一件事是安裝Kendo UI模板向?qū)U(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)確保正確安裝了所有依賴(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)容替換為以下代碼塊：

 

 

 

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

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)如以下代碼塊所示：

 

 

 

 

 

添加路線(xiàn)圖

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

 

 

 

在這里，我們使用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ù)制下面的代碼塊：

 

 

 

第二條路線(xiàn)使用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)目是多么輕松。