Vue.jsは、ドキュメントが充実している点も魅力の1つです。ここでは、Vue.jsの利用するうえで役立つリンクをまとめています。

Vue.js

ガイド

https://jp.vuejs.org/v2/guide/

ストーリー形式の解説がされています。
初めてVueを利用されるかたが、まず最初に読むべきドキュメントです。

クックブック

https://jp.vuejs.org/v2/cookbook/

下記のように独立した解説が掲載されています。

• VS Code によるデバッグ
• Vue コンポーネントを npm パッケージ化する

APIリファレンス

https://jp.vuejs.org/v2/api/

コンポーネントは全てVueインスタンスです。

Rootインスタンス          // new Vueで作成されたVueインスタンス
 ├─ Headerコンポーネント   // Vueインスタンス
 ├─ Menuコンポーネント     // Vueインスタンス
 │  ├─ Itemコンポーネント  // Vueインスタンス
 │  └─ Itemコンポーネント  // Vueインスタンス
 └─ Footerコンポーネント   // Vueインスタンス

APIリファレンスから インスタンスプロパティ インスタンスメソッド の利用方法を確認できます。

スタイルガイド

https://jp.vuejs.org/v2/style-guide/

下記のように、Vue.jsを利用する上で気をつけるべき記述方法を確認できます。

• コンポーネントの命名
  • 複数単語にすべき
  • 1つしかアクティブにならないなら The というプレフィックスをつける
• v-for と一緒に v-if を使うのを避ける

定期的に読み返したい内容です。

利用例

https://jp.vuejs.org/v2/examples/

下記のように、Vue.jsの利用例を確認できます。

• Markdown エディタ の例
• Firebase + バリデーション の例

リポジトリ

https://github.com/vuejs/vue

Vue CLI｜開発環境構築ツール

概要

Vue CLIを利用することで、Vue本体以外にも「Babel」や「ESLint」などフロント開発に必要な環境を手軽に構築できます。

リンク

• ドキュメント
  • https://cli.vuejs.org/guide/
• リポジトリ
  • https://github.com/vuejs/vue-cli

Vue Loader｜Webpackのローダー

概要

Webpackのローダーです。SFC(Single-File Component) 形式で書かれた .vueファイル をJavaScriptコードにコンパイルします。

リンク

• ドキュメント
  • https://vue-loader.vuejs.org/
• リポジトリ
  • https://github.com/vuejs/vue-loader

Vuex｜状態管理

概要

Vuexは、アプリケーション内の全てのコンポーネントで共有する 状態 を管理します。
以下のようなケースで活躍します。

• 兄弟コンポーネント間でデータを共有したいとき
• 階層が深い親子関係でデータを共有したいとき

アプリケーションの規模が大きくなるほど役立つライブラリです。

構成要素

Vuexの構成要素は以下のようになります。

Vuexドキュメントのモジュールで書かれている内容ですが、ソースで表すと以下のようになります。

const moduleA = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: { ... },
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

リンク

• ドキュメント
  • http://vuex.vuejs.org/ja/
• リポジトリ
  • https://github.com/vuejs/vuex

Vue Router｜SPAの構築

概要

コンポーネント と ルート のマッピング機能などを提供しています。SPAを構築したいときに利用します。

リンク

• ドキュメント
  • http://router.vuejs.org/ja/
• リポジトリ
  • https://github.com/vuejs/vue-router

Vue Test Utils｜単体テストライブラリ

概要

Vueコンポーネントの単体テストをサポートします。

テストでは、入力 に対して 出力 が期待した結果であることを確認します。

• 入力
  • ユーザー操作（ボタンクリックなど）
  • propsへの値渡し
  • ライフサイクルメソッドの実行
• 出力
  • HTMLへ描画
  • イベント発行

リンク

• ドキュメント
  • https://vue-test-utils.vuejs.org/ja/
• リポジトリ
  • https://github.com/vuejs/vue-test-utils

awesome-vue

awesome-vueは、vue.jsに関するリンク集です。3rd Partyの Component Framework Utility などを探すときに役立ちます。

• https://github.com/vuejs/awesome-vue

Cheatsheet

• https://vuejs-tips.github.io/cheatsheet/
• https://flaviocopes.com/vue-cheat-sheet/