2014最近Vue.jsについて調べたり試したりしていて、browserifyと組み合わせたexampleがなかなか興味深かったので参考に自分でも作ってみました。参考https://github.com/vuejs/vue-browserify-example作ったサンプルhttps://github.com/koba04/vue-boilerplatehttp://koba04.com/vue-boilerplate/browserifyVue.js自体はビルドにCompomentを使っているのですが、ここでは個人的な好みによりbrowserifyを使っています。上記のexampleではbrowserifyにプラスしてwatchifyとpartialifyを使っていたのですが、今回はlivereloadもしたかったのでwatchifyではなくてbeefyにして、さらにcoffeeifyとstylifyも使ってcoffeescriptとstylusのcompileも任せることにしました。buildするとbundle.jsが生成されるようになっています。}ちなみにpartialifyはhtmlをrequireで読み込むのに使っています。buildが出来るようになりました。componentsVue.jsを使っていると、ViewModelをCompomentとして組み合わせてアプリケーションを作る感じになっていくので、Component単位でhtml、js、cssをまとめたくなります(ならない?)。Vue.jsにはcompomentという概念があるのでこんな感じでViewModelをcompomentとして登録することが出来ます。'../nav/index.coffee'exampleでもそのようになっていて、partialifyでhtmlとcssをrequireして読み込んでcssの方はinsert-cssで追加する感じになっています。insert-cssというのはsubstackが作っているライブラリで、CSSを渡すとDOMにstyle要素を作ってhead要素にappendしてくれるというライブラリです。https://www.npmjs.org/package/insert-cssただCSSはグローバルに作用してしまいます。名前ベースで解決したくなりますがCSSではネストした記述をサポートしていません。そこでstylusを使ってネストで書きやすくしてみました。serifこんな感じにすると、Compoment単位でディレクトリ作ってindex.coffeeの中でinsert-cssを使ってcssを追加しつつpartialifyでhtmlをtemplateとして設定することで、javascriptとhtmlとcssをまとめることが出来ます。ファイル名の付け方は悩ましいですが・・・。index.stylまぁ実際はcompoment化してもなかなか再利用は難しいのですが、こういう分け方もありかなーと思いました。animation余談ですが、今回作ったサンプルの遷移時のウザイアニメーションは、v-viewとv-animationを組み合わせています。http://koba04.com/vue-boilerplate/routingはdirectorとv-viewとVue.compomentを組み合わせています。angular.jsのng-animateみたいな感じでv-enterとv-leaveというクラスがあてられるのでそれを使ってアニメーションさせています。v-viewとv-animationの組み合わせについては、v-leaveのanimation-endで要素が削除されるためアニメーションが指定されていないと古い要素が残ったりと若干ハマりどころもあるのですが、それはまた別の機会にまとめたいと思います。power-assertな組み合わせのテストも含めたかったのですが間に合わず・・。