Vue.js & Wijmo クイックスタート

1. vue-cliのインストール

vue-cliをインストールしていない場合は、次のコマンドを実行してvue-cliをインストールします。

npm install -g vue-cli

2. 新規アプリの作成

アプリを作成します。コマンドを実行するとアプリの設定をいくつか質問されますが、全てEnterを押して既定値を選択します。

vue init webpack アプリ名

3. アプリフォルダへ移動

アプリフォルダに移動します。

cd アプリ名

4. Wijmoパッケージのインストール

Wijmoパッケージをインストールします。下記はトライアル版のパッケージをインストールするコマンドです。製品版をインストールする場合は、製品に収録されるNpmImages/wijmo-commonjs-minフォルダを参照します。

npm install --save http://prerelease.componentone.com/wijmo5/npm-images/C1Wijmo-Enterprise-Eval-CommonJs-5.20173.405.tgz

5. cssファイルのコピー

Wijmoに収録されるDist/Stylesフォルダからアプリケーションのsrcフォルダにwijmo.min.cssファイルをコピーします。

6. vueファイルの編集

src/App.vueファイルに、以下にある赤字部分のコードを追加します。

<template>
<div id=”app”>
     <wj-input-date :value=”date” :value-changed=”valueChanged”></wj-input-date>
{{date.toLocaleDateString()}}
</div>
</template>

<script>
 import ‘wijmo/wijmo.vue2.input’

export default {
   data () {
return {
date: new Date(2018, 0, 1)
}
},
methods: {
valueChanged: function (s) {
this.date = s.value
alert(s.value.toLocaleDateString())
}
}
}
</script>

<style>
 @import ‘wijmo.min.css’
</style>

7. 実行

アプリを実行します。

npm start

8. 配布

アプリを配布する場合は、次のコマンドを実行して、distフォルダをWebサーバーに配布します。

npm run build