Rails環境に最適なVue.js構成を探る
1 like86 views
2018年12月12日に開催された【とらのあな主催】オタクが最新技術を追うライトニングトークイベントのライトニングトーク資料です。
Rails環境に最適なVue.js構成を探る
- 2. 虎の穴 虎の穴 虎の穴 虎の穴 虎の穴 虎の穴 今回話すこと 1. 自己紹介 2. なぜRails環境に？ 3. 導入準備 4. 導入パターンその1（htmlと完全API連携） 5. 導入パターンその2（コンポーネント） 6. 次やりたいこと 2
- 3. 虎の穴 虎の穴 虎の穴 虎の穴 虎の穴 虎の穴 自己紹介 名：JUNE-JUNE ‣ 現在：N代目ファンティアマン ‣ 前職：スマフォアプリサーバーサイドエンジニア ＋プロジェクトリーダーみたいなことやってた オタク ‣ えろげ（ランス大好き） ‣ フリーゲーム（いろいろやってます） ‣ アニメ（毎週10本程度） 3
- 6. 虎の穴 虎の穴 虎の穴 虎の穴 虎の穴 虎の穴 Vue.jsって何？ ‣ 人気急上昇中のJavascriptフレームワーク ‣ PHPの神フレームワークLaravelも採用 ‣ DMMとかLINEとか任天堂とかが採用している ‣ 書き方がシンプル ‣ ドキュメントがめっっっっっちゃ充実 ‣ 学習効率が良い ‣ デザイナーに優しい 6
- 14. 虎の穴 虎の穴 虎の穴 虎の穴 虎の穴 虎の穴 いろいろやった # Gemfileにwebpackerを追加した後に $ bundle install --path vendor/bundler # webpackerが使うからにゃーんをインストールだにゃーん $ npm i -g yarn # rails環境にvue環境を導入 $ rake webpacker:install $ rake webpacker:install:vue # .vueファイルを読み込めるように loaderをインストール $ npm install vue-loader --save # vue公認のAPI実行ライブラリのaxiosをインストール $ npm install axios --save # vueを含めたコンパイルコマンド $ bin/webpack 14
- 28. 虎の穴 虎の穴 虎の穴 虎の穴 虎の穴 虎の穴 Rails環境における Vueのコンポーネント実現のやり 方、実に謎。 やーい、 へっぽこプログラマー 導入パターンその2 （コンポーネント） 28
- 32. 虎の穴 虎の穴 虎の穴 虎の穴 虎の穴 虎の穴 導入パターンその2 （コンポーネント） サンプルプロジェクトが導入していたライブラリ。 "vue" // 必須。 "vue-i18n" // 多言語化ライブラリ。今回は除外。 "vue-loader" // .vueファイルコンパイルのため必須。 "vue-router" // vueでSPAを実現するため必須。 "vue-template-compiler" // 必須。 "vuex" // 状態管理ライブラリ。今回は除外。 32