NuxtでVueを快適にする

Yumemi.vue #4
登壇予定資料

Transcript

1. NuxtでVueを快 適にする Yumemi.vue #4 初心者登壇枠
2. 自己紹介 名前　中島　駿介 年齢　23 性別　男性 経験年数　8ヶ月 趣味 ゲーム・たまに勉強 経歴詳細
3. アジェンダ • 経緯 • Nuxt.jsとは • NuxtはVue.js単体で使った場合と何が違うのか？ • まとめ
4. 経緯 Vue.js 公式ライブラリの導 入と扱いに煩わしさを感じ た。 容易に扱える環境を整えた いと考えた時に行きついた 先がNuxt.jsです
5. Nuxtとは？ SSR！
6. Nuxtとは Nuxt.js公式参照 Nuxt は、Vue の公式ガイドラインに沿って強力なアーキテクチャを提供するように設計 されたフレームワークです。 Vue.js環境を快適にしたいと考えているなら推奨フレームワーク
7. 何が違うのか？
8. ルーティング Nuxtではpagesディレクトリ内の Vue ファイルの木 構造に沿って、自動的に vue-router の設定を生 成します。 自分で設定する必要がない 記述忘れの心配がなく、また容易に pageのpathを 変更する事ができます。 vue-routerで行える事はほとんど再現可能です pages/ --| test/ -----| index.vue <--path "test/" -----| one.vue <--path "test/one" --| index.vue <--path "/"
9. 状態を管理（Vuex） Nuxt.js は store ディレクトリを探索し存在するときには以下を実 行します • Vuex をインポート • store オプションをルートの Vue インスタンスに追加
10. ２つのモード どちらか好みのほうを選んで使ってください（ほぼ選択肢はない） • モジュールモード： store ディレクトリ内のすべての *.js ファイルが 名前空間付きモ ジュール に変換されます（index はルートモジュールとして存在します） • クラシックモード (廃止予定)：廃止されるので説明不要
11. シンプル stateを関数としmutations、actions、gettersをオブ ジェクトとしてシンプルにエクスポートします。 オプションでモジュールファイルを state.js、 actions.js、 mutations.js、getters.js といった別々 のファイルに分離することができます。 /** index.js */ export const state = () => ({ counter: 0 }) export const mutations = { increment (state) { state.counter++ }}
12. 結論 Nuxtを導入する事でコードがすごくシンプルになり、Vueそのもの のハードルも下がります。
13. あとがき 今回の記事ではVue単体では面倒な設定の記述をNuxtでは書く必要なく、改修時など に変更する箇所も減り、より快適にVueをコーディングできることを理解してもらえるよう に２つの違いから解説していきました。 NuxtはSSR(サーバーサイドレンダリング)を行うためだけではなくVue開発そのものを快 適にしてくれるフレームワークである事を理解してもらえたら幸いです。
14. ご清聴ありがとうございました