Vue & Wijmoのquickstartをやってみる。

6633 ワード
wijmo Vue.js nodebrew vue-cli nodebrew テキストリンク

↓を参考にVue & Wijmoを試してみます。
Vue & Wijmoクイックスタート【2019年版】　

ミドルウェア バージョン
Mac OS X 10.15.4
nodebrew 1.0.1
npm 6.14.4 
 npm install -g @vue/cli
 vue create quickstart
 cd quickstart
 npm install wijmo

vim src/App.vue 

<template>
  <div id="app">
    <wj-flex-grid :itemsSource="gridData">
      <wj-flex-grid-column header="ID" binding="id" :width="60"></wj-flex-grid-column>
      <wj-flex-grid-column header="商品名" binding="product" :width="200"></wj-flex-grid-column>
      <wj-flex-grid-column header="受注日" binding="date" :width="120"></wj-flex-grid-column>
      <wj-flex-grid-column header="金額" binding="amount" :width="100" format="c"></wj-flex-grid-column>
    </wj-flex-grid>
  </div>
</template>

<script>
import 'wijmo/wijmo.vue2.grid';
import 'wijmo/cultures/wijmo.culture.ja.js';
import 'wijmo/styles/wijmo.css';

export default {
  name: 'app',
  data: function () {
    return {
      gridData: [
        { id: 1, product: '商品１', date: '2020/05/11', amount: 100 },
        { id: 2, product: '商品２', date: '2020/05/11', amount: 1000 },
        { id: 3, product: '商品３', date: '2020/05/11', amount: 2000 },
        { id: 4, product: '商品４', date: '2020/05/11', amount: 15000 }
      ]
    }
  },
  components: {
  }
}
</script>

npm run serve