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リファレンス
コンポーネントは全て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 + バリデーション の例
リポジトリ
Vue CLI|開発環境構築ツール
概要
Vue CLIを利用することで、Vue本体以外にも「Babel」や「ESLint」などフロント開発に必要な環境を手軽に構築できます。
リンク
Vue Loader|Webpackのローダー
概要
Webpackのローダーです。SFC(Single-File Component)
形式で書かれた .vueファイル
をJavaScriptコードにコンパイルします。
リンク
Vuex|状態管理
概要
Vuexは、アプリケーション内の全てのコンポーネントで共有する 状態
を管理します。
以下のようなケースで活躍します。
- 兄弟コンポーネント間でデータを共有したいとき
- 階層が深い親子関係でデータを共有したいとき
アプリケーションの規模が大きくなるほど役立つライブラリです。
構成要素
Vuexの構成要素は以下のようになります。
store:アプリケーションの状態
と状態の操作方法
を持つコンテナ。
state:アプリケーションの状態。
mutations:state
を変更するためのもの。
actions:必要に応じて外部APIの呼び出しなどを行い mutation
を呼び出す。
getters:state
をもとに値を返す。
modules:store
を管理しやすくするために、ストア内部でモジュール単位に分割できる。
Vuexドキュメントのモジュールで書かれている内容ですが、ソースで表すと以下のようになります。
const moduleA = {
state: { ... },
mutations: { ... },
actions: { ... },
getters: { ... }
}
const moduleB = {
state: { ... },
mutations: { ... },
actions: { ... }
}
const store = new Vuex.Store({
modules: {
a: moduleA,
b: moduleB
}
})
リンク
- ドキュメント
- リポジトリ
Vue Router|SPAの構築
概要
コンポーネント
と ルート
のマッピング機能などを提供しています。SPAを構築したいときに利用します。
リンク
Vue Test Utils|単体テストライブラリ
概要
Vueコンポーネントの単体テストをサポートします。
テストでは、入力
に対して 出力
が期待した結果であることを確認します。
- 入力
- ユーザー操作(ボタンクリックなど)
- propsへの値渡し
- ライフサイクルメソッドの実行
- 出力
- HTMLへ描画
- イベント発行
リンク
awesome-vue
awesome-vueは、vue.jsに関するリンク集です。3rd Partyの Component
Framework
Utility
などを探すときに役立ちます。