В этой серии мы покажем, как вы можете использовать Wijmo с NPM и Webpack для создания приложений, ориентированных на самые популярные платформы приложений JavaScript. Этот блог посвящен Vue.js, экосистеме, которая масштабируется между библиотекой и полнофункциональным фреймворком. Vue.js — самый маленький и наименее самоуверенный фреймворк в этом списке. Он позволяет вам писать традиционные файлы HTML и JavaScript или файлы vue, которые объединяют HTML, JS и CSS для создания инкапсулированных повторно используемых компонентов. Прочитайте о поддержке Wijmo Vue.js
Серия блогов
В этом руководстве мы не будем вдаваться в подробности NPM, Webpack или самого Vue.js. Все эти инструменты невероятно популярны и тщательно задокументированы, и вы можете прочитать нашу электронную книгу по фреймворкам для хорошего обзора. Вместо этого мы сосредоточимся на задаче добавления Wijmo в простые приложения, написанные на Vue.js.
Основные этапы создания и обслуживания приложений одинаковы во всех фреймворках:
- Установите соответствующий CLI (утилиту интерфейса командной строки) для создания, запуска, обслуживания и развертывания приложений.
- Используйте CLI для создания приложения.
- Используйте NPM, чтобы добавить Wijmo в приложение.
- Импортируйте компоненты, которые вы хотите использовать, и добавьте соответствующую разметку.
Последний Vue CLI 3.0 содержит множество замечательных улучшений. Благодаря встроенной поддержке всех популярных инструментов разработчикам не нужно изучать все инструменты самостоятельно. Он также имеет графический пользовательский интерфейс, который упрощает редактирование проектов без необходимости запоминать тысячи опций для различных инструментов.
Это обновленные шаги, необходимые для создания нового приложения VueJS и его запуска:
Шаг 1. Создайте новое приложение Vue.js
Шаг 2:
Следующим шагом является использование графического интерфейса для включения компилятора среды выполнения Vue. Компилятор времени выполнения требуется для текущей версии взаимодействия Wijmo Vue (в следующей версии взаимодействия Wijmo Vue в этом нет необходимости):
Не забудьте нажать кнопку «Сохранить изменения» после включения компилятора времени выполнения. Теперь вы можете запустить приложение из графического интерфейса, как показано ниже:
Это имеет тот же эффект, что и запуск приложения из командной строки:
npm run serve
Вы должны увидеть приложение, работающее в браузере. Приступаем к редактированию приложения. Всякий раз, когда вы сохраняете какие-либо изменения, браузер автоматически перезагружает приложение.
Проекты VueJS обычно определяют компоненты в файлах с расширением «vue». Эти файлы содержат HTML, JavaScript и CSS для компонентов. Это похоже на React, где разметка и скрипт объединены в файлы JSX.
Пример приложения состоит из двух компонентов: App и HelloWorld. Первый является основным компонентом. Он отображает логотип VueJS и компонент HelloWorld ниже.
Откройте файл src/components/HelloWorld.vue в VS Code и начните с редактирования HTML-части файла:
<template>
<div class="hello">
<h1></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>Разметка очень похожа на Angular. Директивы соответствуют элементам управления или классам Wijmo, а атрибуты соответствуют свойствам.
Шаг 3. Добавьте элементы управления Wijmo и их данные
Теперь давайте посмотрим на часть кода JavaScript, прямо под HTML:
<script> // import Wijmo import 'wijmo/wijmo.vue2.grid'; import 'wijmo/wijmo.vue2.chart'; import { CollectionView } from 'wijmo/wijmo';// apply Wijmo license key (if you have one) //import { setLicenseKey } from 'wijmo/wijmo'; //setLicenseKey('your key goes here');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); }export default { name: 'HelloWorld', data: function() { return { msg: 'Welcome to Your Vue.js App', data: getData() } } } </script>
Код импортирует стили и компоненты Wijmo, а затем экспортирует объект, содержащий сообщение для отображения на экране и данные для отображения в элементах управления.
Шаг 4. Обновите таблицу стилей
Файл заканчивается несколькими правилами CSS:
<!-- 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, чтобы сохранить изменения.
Чтобы закончить, откройте файл «src/App.vue» в VS Code и добавьте строку для импорта CSS-файла Wijmo:
<style>
@import "../node_modules/wijmo/styles/wijmo.css";
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>Нажмите ctrl+S, чтобы сохранить файл и переключиться в браузер, чтобы увидеть результат изменений:
Поскольку сетка и диаграмма связаны с одним и тем же CollectionView, любые изменения, внесенные в данные в сетке, автоматически отражаются на диаграмме. Например, вы можете щелкнуть заголовки столбцов, чтобы отсортировать данные или отредактировать некоторые значения с помощью клавиатуры.
Usimg Wijmo и современные приложения JavaScript
Чтобы интегрировать Wijmo в современные приложения JavaScript, достаточно установить его с помощью NPM и импортировать нужные компоненты из библиотеки.
Возможность использовать одни и те же компоненты пользовательского интерфейса в разных фреймворках упрощает работу, если вы работаете с несколькими фреймворками или думаете, что в будущем можете сменить фреймворк.
