Vue.jsはRiot.jsより良いんじゃないかと思ったのでメモ

• RiotとVue検討段階の人が書いたものです。実用してみての感想ではないのでご注意願います。

Vue.jsのドキュメントに優位性の説明があった

他のフレームワークとの比較 - Vue.js

Riot 2.0 はよく似たコンポーネントベースの開発モデル（”タグ”と Riot では呼ばれています）を提供しており、必要最小限の美しく設計された API を持っています。Riot と Vue はおそらくその設計哲学の多くが共通しているのでしょう。しかしながら、Riot よりも少し重いにも関わらず、Vue はいくつか著しく優れた点を持っています：

• トランジションエフェクトシステム。Riot にはありません。
• ずっと強力なルータ。Riot のルーティング API は極めて最小限です。
• より優れた性能。Riot は 仮想 DOM を使用しているというよりむしろDOM ツリーをトラバースしているため、Angular 1 と同じ性能問題に苦しめられています。
• より熟成したツールのサポート。Vue は Webpack、Browserify の公式サポートを提供していますが、対して Riot はビルドシステムの統合についてはコミュニティのサポートに頼っています。

懸念: Vue.jsだと一つのファイルにHTML,CSS,JSがまとめられないのでは？

Vue.jsだとRiot.jsのようなコンポーネント化はできないけど、Vueifyがあってできる。

• vuejs/vueify: Browserify transform for single-file Vue components

app.vue

<style>
  .red {
    color: #f00;
  }
</style>

<template>
  <h1 class="red">{{msg}}</h1>
</template>

<script>
export default {
  data () {
    return {
      msg: 'Hello world!'
    }
  }
}
</script>

cssコンパイラをstylusにするのも簡単だった。yarn add -D stylusするだけだった。

app.vue(stlyus+jade+coffee)

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

<template lang="jade">
h1(class="red") {{msg}}
</template>

<script lang="coffee">
module.exports =
  data: ->
    msg: 'Hello world!'
</script>

しかも、Riot.js+Webpackを組むより楽ちんだった。

• vuejs-templates/browserify: A full-featured Browserify + vueify setup with hot-reload, linting & unit testing.

$ yarn global add vue-cli
$ vue init browserify my-project
$ cd my-project
$ yarn install
$ yarn dev

Atomのハイライト

• language-vueを入れると、.vueファイルがハイライトされる。
• language-stylusを入れると、<style lang="stylus">の中身もハイライトされる。