vue シリーズをシュッと試す
自分のローカルで作業する為のフロントを作るのに気になっていた vue シリーズ（vue.js, vuex, vue-router, vue-cli）をシュッと使ってみた。（ついでに material design lite も試した） 片手間のものなのであまり有益な情報ではないけど、一応思うところ含めて残しておく。
vue.js, vuex, vue-router はドキュメントが全て日本語のものがあるのでとても分かりやすかったです。*1*2*3 なので頭から全部つらつらと読んで手を動かすのが良いと思います。
vue.js を一枚スクリプトで試すパターン
go で api を書いて、vue.js を unpkg から読み込んで一枚のスクリプトで書いてみた。自分の環境で動けば良いので
[HOGE] () {
`${...}`
}
のようなのは普通に使いました。 component 書くときに改行が発生するので `...` が使えないとちょっとつらい。
template から methods に登録したものを呼んで、data を書き換えてると小さいものでもすぐ分かりづらくなるなぁという印象。（雑に書いているから）
一枚スクリプトに vuex を足す
unkpg から vuex を読み込むと自動で vuex が有効化される。
api とかの呼び出しには書いてある通りに axios を使い、ドキュメントにある通りに Vuex.Store を定義していく。mutations の中では state の中身を書き換えるだけで非同期な処理は許されないらしいので*4、actions につらつらと書く。大きいもの書いていくと actions がすごいことになりそうな気がしているけど、どうなんでしょう？
まぁでも vue.js だけでつらつら書くよりは分かりやすいかな？
後 vuex のドキュメントで
computed: {
...Vuex.mapState([...])
}
みたいな書き方がされてるけど、まだブラウザで使えないので、複数必要な時は
Object.assign({}, Vuex.mapState([...]), ...)
のような書き方でお茶を濁した。
vue-router も付け足す
vuex の使い方がわかったのでついでに vue-router も付け足すことにした。と言っても、
var router = new VueRouter({
routes: [
{ path: '/', component: root },
{ path: '/hoge/:hoge', name: 'hoge', component: hoge }
]
});
var vm = new Vue({
store,
router,
}).$mount('#app');
みたいに書くだけなので特にやることはなかった。これもドキュメントにあるので特に気にすることはないけど*5、/hoge/fuga, /hoge/haaa と遷移するとコンポーネントが再利用されて表示が変わらないので
watch: {
'$route' (to, from) {
this.getHoge();
}
},
created: function() {
this.getHoge();
},
みたいに、route が変わったときにも初期化と同じ方法でデータを読み込んであげる必要がある。
material design lite で作ったボタンが反応しなくなる
vue-rouer で画面移動した後に material design lite で設置したボタンが反応しなくなることがあった。これは
mounted: function() {
componentHandler.upgradeDom();
}
とすることで解決した。該当の component が設置されたら再度 material design lite 側に気づいてもらう必要があるよう。
vue-cli で作ったひな形でビルドするようにする
一枚スクリプトにつらつら書きながら、vuejs, vuex, vue-router の使い方がわかったので、今度は vue-cli で作ったひな形からビルドするようにする。（ vue init webpack $name）
これもドキュメント通りに書いていけばいいので特に問題はないのだけれど、今まで雑に書いていたので lint に引っかかるのがつらいぐらい。
api サーバへの proxy
webpack の dev server を使っていると api サーバへの通信が出来ないので（ポートが違うので） proxy 機能を使ってあげる必要がある。
config/index.js
dev: {
env: require('./dev.env'),
port: 8080,
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
'/api': {
target: 'http://localhost:5555',
changeOrigin: true
}
},
// CSS Sourcemaps off by default because relative paths are "buggy"
// with this option, according to the CSS-Loader README
// (https://github.com/webpack/css-loader#sourcemaps)
// In our experience, they generally work as expected,
// just be aware of this issue when enabling this option.
cssSourceMap: false
}
こう設定すると dev server は 8080 で立ち上がるけど /api への通信は localhost:5555 に送ってくれる。
webpack されない material design lite の変数を触る
上に書いた componentHandler は webpack では未知のものなので lint で怒られてしまう。（方法はいろいろありそうだけど） build/webpack.base.conf.js に以下を書き足した
externals: [
{
"componentHandler": true
}
],
そうすると下のように書ける
Hoge.vue
import componentHandler from 'componentHandler'
export default {
mounted: function () {
componentHandler.upgradeDom()
}
}
終わり
あとは build した成果物を吐き出すディレクトリを設定すれば良い。dev server の時は vue devtools という chrome extension が使える。 自分が片手間にシュッと使うぶんには結構良さそうだなぁと感じました。
あと、vue-cli が生成する webpack の設定を見て人間が設定できるものじゃないなとも感じた。
