ピースペース

Posts Tagged ‘vue.js

Vue.jsアプリのスタートポイント

leave a comment »

Vue.jsの検証アプリがだいたいできてきました。
他のフロントエンドフレームワークをやっていないので比較はできませんし、
簡単なアプリなので全部の機能を使いこなしたわけでもないですが、
特に気になったりひっかかったりするところはありません。
良いと思います>Vue.JS

jsをビルドしてjsを生成する。←おもしろいですね。
このおかげ、Webアプリを昔から慣れ親しんだFormアプリのように作成できるわけです。
20年前にDelphiで作成していたようなアプリをひとつポンとWebページに貼りつける。
というイメージです。

template, style, scriptをひとつの.vueファイルにまとめて書く。のも気にいりました。
jqueryとajaxでページの部分更新を行ったりする場合、
必要になるscriptやcssをどこに配置するのがいいの?←で迷うときがありましたが、
そうゆうのが一番面倒なんですよね;から解放される気がします。

なので、簡単なアプリであっても最初から単一コンポーネント化して開始する。
のが良いと思います。
そして、templateが大きくならないようにどんどんコンポーネントに分解していく。
データの共有をどうするの?とちょっと不安がよぎることはありますが、
余計な心配はしないで、どんどん分解しちゃって良いです。
コンポーネントから別コンポーネントのメソッドを呼び出す仕組みもちゃんとあります。
その辺りも、silverlightで作るvmなんかよりもむしろ簡単なような気がしました。

ということで、webpackに食わせるapp.jsはこれで決まり!で良いと思います。
import Vue from ‘vue’
import root from ‘./root.vue’
new Vue({
    el: ‘#app’,
    components: { root },
    template: ‘<root/>’
})

どんなアプリであってもここから始めてコンポーネントに分解していく。
アプリ開発作業=コンポーネント分解作業。に単純化しちゃいます。
作業規模は単純にコンポーネント数のリニア関数です。いいでしょ?

そして分解したコンポーネントに用意するべきものは
components, props, data, methods, computed, created…
とコンポーネントのプロパティにきちんと整理されているも良いと思いました。
vue.jsをデザインした方はきれい好きな人だと思います。

Written by nasu38yen

2017年12月19日 at 8:25 午前

カテゴリー: .NET, プログラム

Tagged with