Vueify.js

Broserify ＋ Vue.jsのコンポーネント管理システムが便利

まず、WebComponentっぽく書ける.vueファイルを作ります
stylusとcoffee-scriptとjadeに依存するとlang="*"と書けて更に便利

npm install --save-dev stylus coffee-script jade

こうしておきます。

component.vue


<style lang="stylus">
.red
  color #f00
</style>

<template lang="jade">
div.template(v-repeat='messages')
    h1(class="red") {{h1}}
    p we are template of vue
</template>

<script lang="coffee">
module.exports =
  data: ->
    messages:[ {h1: 'Hello world!'} , {h1:'yohawing'}]
</script>

メインのスクリプトでは、もろもろこうやって requireすれば

main.coffee


Vue = require "vue"
$ = require "jquery"
component = require "../component.vue"

vue = new Vue component
    .$mount '#targetElement'

VueのComponentを外部に記述できて管理が幾分楽になります。
DataBindingメッチャ早い。

他のComponentエンジンと比較すると、StyleとかScriptもComponent内に記述できるので
WebComponent的な使いまわせる部品を作れるので便利かもしれない。

この辺は、もうちょいカッコイイ書き方を模索したいです。

Vue.jsとbrowserify使うときは、Vueify.jsが便利っぽい

Vueify.js