关于vue.js:如何使用在Vuejs中轻松构建UI组件这篇文章将告诉你答案

点击获取工具 >>
本文将为大家介绍如何应用 Kendo UI 在 Vue.js 中构建一个气象视图 UI 组件，并实现与图表组件的界面。

首先让咱们一起来理解一下背景。

什么是 Kendo UI？

Kendo UI 是一个全面的 Web 用户界面框架，其中蕴含 JavaScript UI 组件的汇合，这些 JavaScript UI 组件具备 jQuery 库以及 Vue、React 和 Angular 等更古代的库。Kendo UI 开发人员应用大量的 UI 小部件和数据可视化组件来构建交互式且响应迅速的高性能应用程序。

为什么抉择 Kendo UI？

应用 Kendo UI，您能够轻松地将真正高级的 UI 组件增加到您抉择库的前端我的项目中，不用放心接口的要害性能，而且能够节省时间，只需关注专有性能即可。Kendo UI 附带了易于应用的集成，反对您喜爱的每个前端 Web 框架（例如 Vue.js）。

除根本的 UI 组件外，Kendo UI 还为您提供了高级的数据可视化 UI 元素，可确保您不用向我的项目中增加其余库即可解决图表，这些高级 UI 元素也可自定义。

你会构建什么？

您将应用 Kendo UI 在 Vue.js 中构建气象视图 UI 组件，将首先应用 VS Code 中的 Kendo UI starter 扩大 scaffolding，而后应用 Vue Router 创立路由，最初应用一些 Kendo UI 图表组件来构建界面。

入门指南

假如您曾经装置了 Vue；如果没有，请转到装置指南。当初关上您的 VS Code，要做的第一件事是装置 Kendo UI 模板向导扩大。您能够通过转到 VS Code 的扩大程序标签并搜寻“Kendo UI Template”来实现，持续下载，重新启动 VS Code 之后，当初能够应用它来搭建新我的项目了。

如何应用

• 关上 VSCode
• 在 Windows / Linux 中按 ctrl + shift + p，在 Mac 中按⇧⌘P 关上 VSCode 的扩大程序启动器
• 输出 / 抉择 Kendo UI Template Wizard：启动并按 Enter 启动扩大

您能够先抉择一个项目名称和一个文件夹来开始，单击 Next 时，零碎会提醒您抉择要应用的前端库，Kendo UI 具备 Vue、Angular 和 React 的组件元素。

下一步是抉择新我的项目中所需的页面，对于此我的项目，您能够抉择一个带有路由的图表。抉择之后，模板向导将在后盾运行 Vue create 命令，并为您搭建 Vue 应用程序。

配置

既然曾经实现了应用程序的 scaffolding 工作，那么您必须通过运行以下命令来确保正确装置了所有依赖项：

cd newapp
npm install

导航到新应用程序的根目录，并在 main.js 文件中，确保它看起来是这样：

`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’)`

您能够看到路由已引入到我的项目中，如果您没有应用 Kendo UI template wizard 或抉择了一个空白我的项目，则能够在我的项目终端中应用以下命令轻松增加路由：

vue add router

在 app.vue 文件中，将内容替换为以下代码块：

`<template>
<div id=”root”>
<div class=”content”>
<router-view></router-view>
</div>
</div>
</template>
<script>
export default {
name: ‘app’,
components: {
}
}
</script>`

当初已将导入的路由引入这里，如果关上路由文件夹，将看到已在其中注册路由的路由脚本（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
}
]
});
`
当初，当您查看 app.vue 文件时，将看到这些定义的路由引入的地位。要定义这些独自的路由，请导航到 components 文件夹。您将看到很多组件，删除所有组件，仅保留主组件。

增加单个组件

您的主组件 home.vue 应如以下代码块所示：

`<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>`

增加路线图

您可能会遇到谬误，可能会询问您在路由脚本中定义的路由。要创立这些文件，请在 components 文件夹中创立一个 chart1.vue 文件，并在其中复制以下代码块：

`<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 图表组件，该组件带有一个非凡的动画，因为它能够依据大陆人口来定义大陆。Kendo UI 与 Vue 完满地集成在一起，您能够在特定组件的 Vue 返回函数中增加很多选项。

对于第二种办法，在 components 文件夹中创立一个 Chart2.vue 文件，而后在其中复制上面的代码块：

`<template>
<div class=”container-fluid col-12 col-lg-9 mt-5″>
<h2 >Climate Report for Africa</h2>
<div class=”climate “>
<h3>Climate control history</h3>

</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 组件描述气象条件，将所有内容捆绑在一起，您当初能够应用以下命令在开发服务器中运行该应用程序：

npm run serve

您将领有一个具备路由性能和所有预约义图表功能完善的 UI 组件。

论断

这篇文章介绍了针对 Vue.js 的 Kendo UI，以及如何应用 Kendo UI 模板向导轻松启动 Vue 我的项目。它还显示了实现 Vue 路由并将 Kendo UI 组件引入 Vue 我的项目是如许轻松。