概述
在本文中，我們將展現如何將WijmoJS與NPM和Webpack一同運用來建立最盛行的基於JavaScript運用程序框架的Web運用。 本文重要關注Vue.js，它是一個可以在一個庫和一個全功能框架之間自在擴大的生態系統，Vue.js是如今主流前端框架中最小且最不牢固的一個。它許可您編寫連繫HTML，JS和CSS的傳統HTML文件以及純JavaScript或“vue”文件，以建立封裝的可重用組件。 點擊下方鏈接，相識WijmoJS對Vue.js的支撐(www.grapecity.com.cn/developer/wijmojs/vuejs)
在這裏，我們不會細緻引見NPM，Webpack或Vue.js自身。這些東西都異常受歡迎，並且有完全的協助文檔，您可以瀏覽我們關於框架的手藝博客(www.grapecity.com.cn/blogs)，以取得優越的概述。相反，我們將專註於將WijmoJS增加到用Vue.js編寫的簡樸運用程序中。
在所有框架中建立和保護運用程序的基礎步驟都是相似的：
l 裝置恰當的CLI（命令行界面實用程序）以天生，運轉，保護和布置運用程序。
l 運用CLI建立運用程序。
l 運用NPM將Wijmo增加到運用程序。
l 導入您要運用的組件並增加恰當的標記。
具體步驟以下：
第1步，建立一個新的Vue.js運用程序
我們將運用Visual Studio Code來建立一個新的Vue.js運用程序。
第2步，增加WijmoJS模塊
Vue.js項目通常在具有“vue”擴大名的文件中定義組件。這些文件包括組件的HTML，JavaScript和CSS款式。相似React，標記和劇本被綁縛到JSX文件中。
示例運用程序有兩個組件：“運用程序”和“HelloWorld”。 第一個是重要組成部份。 它在下面顯現Vue.js圖標和“HelloWorld”組件。
在VS Code中翻開“src / components / HelloWorld.vue”文件，並最先編輯文件的HTML部份：
<template>
<div class=”hello”>
<h1>{{ msg }}</h1>
<h2>Here are some Wijmo controls for you to get started:</h2>
<div class="App-panel">
<wj-flex-grid
:itemsSource="data">
</wj-flex-grid>
<wj-flex-chart
:itemsSource="data"
bindingX="country">
<wj-flex-chart-series name="Sales" binding="sales">
</wj-flex-chart-series>
<wj-flex-chart-series name="Expenses" binding="expenses">
</wj-flex-chart-series>
<wj-flex-chart-series name="Downloads" binding="downloads">
</wj-flex-chart-series>
</wj-flex-chart>
</div>
</div>
</template>
WijmoJS標籤看起來很像Vue.js。Vue指令對應於WijmoJS控件或類，Vue屬性對應於WijmoJS屬性。
第3步，增加WijmoJS控件及其數據
如今讓我們看一下HTML下的JavaScript代碼部份：
<script>
// import Wijmo
import ‘wijmo/styles/wijmo.css’;
import { WjFlexGrid } from ‘wijmo/wijmo.vue2.grid’;
import { WjFlexChart } from ‘wijmo/wijmo.vue2.chart’;
import { CollectionView } from ‘wijmo/wijmo’;
// apply Wijmo license key
import { setLicenseKey } from ‘wijmo/wijmo’;
setLicenseKey(‘your key goes here’);
// export component
export default {
name: 'HelloWorld',
data: function () {
return {
msg: 'Welcome to Your Vue.js App',
data: getData()
}
}
}
function getData() {
var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','),
data = [];
for (var i = 0; i < countries.length; i++) {
data.push({
country: countries[i],
sales: Math.random() * 10000,
expenses: Math.random() * 5000,
downloads: Math.round(Math.random() * 20000),
});
}
return new CollectionView(data);
}
</script>
經由過程代碼導入WijmoJS款式和組件，然後導出一個對象，該對象包括要顯如今屏幕上的音訊以及要顯如今控件中的數據。
第4步，更新款式表
<!– Add “scoped” attribute to limit CSS to this component only –>
<style scoped>
.App-panel {
margin: 0 48pt;
}
.App-panel .wj-control {
display: inline-block;
vertical-align: top;
width: 400px;
height: 300px;
}
</style>
如今按ctrl + S保留變動並切換回瀏覽器以檢察變動的效果：
因為表格和圖表綁定到同一個CollectionView，因而對錶格中的數據所做的任何變動都邑自動反映在圖表中。比方，您可以單擊列題目對數據舉行排序或運用鍵盤編輯一些值。
總結
- 將WijmoJS集成到當代JavaScript運用程序中只需要運用NPM舉行裝置並從庫中導入所需的組件即可。
- WjimoJS確保您可以在差別的框架中運用完全相同的UI組件，以便可以更輕鬆地運用兩個或更多的框架，或許將來在您的運用程序中恣意切換框架。
關於WijmoJS
作為一款純前端控件集，WijmoJS 秉持“快如閃電，觸控優先”的設想理念，在供應優質服務和產物的同時，專註於企業運用開闢，不停優化產物架構，與時俱進。除在環球領先支撐 AngularJS 外，現已周全運用於 React、Vuejs、TypeScript 、Ionic 等主流框架中。
依附先進的觸控設想和周全的 AngularJS 支撐，WijmoJS 的 FlexGrid 和圖表控件更專註於頂級機能和零依賴性。天真的 API 為用戶供應易用、輕鬆的操縱體驗，周全滿足開闢所需，是構建企業運用程序最完全的純前端控件集。
點擊下方鏈接，檢察Wijmo全部內容（www.grapecity.com.cn/developer/wijmojs）
