RailsとVue.jsを合わせて使ってみる
やったこと
以下の記事のTODOアプリを作った * Vue.jsとRailsでTODOアプリのチュートリアルみたいなものを作ってみた - Qiita
学習したこと
→ Rails + Vue.jsでSPAっぽいものを作れそう。
webpacker
読んだ
Webコンテンツを構成するファイルをひとまとめにするツール
- 複数のファイルを1つにまとめることでファイル転送の時間削減ができる
- webpackはjsだけでなくcssや画像までもバンドルできる
Vue-Router
Vue-Routerを使用することで、登録されたパスとコンポーネントで画面内を差し替える(SPAっぽい)
Vue.use()
でプラグインの使用(今回はVue-Router)
またVue-Routerの使い方を見ないといけない…
npm install vue-router --save
してなくてハマった…w
- VueRouterを使用すると、
<router-link>
と<router-view>
というタグを使用できる<router-link>
は<a>
タグとして変換するが、画面遷移でなく、VueRouterに登録されたパスからコンポーネントを探す- そして
<router-view>
の部分に表示する
その他メモ
- インストールでハマった。webpackerのインスコとvueのインスコもれでした
rails webpacker:install
rails webpacker:install:vue
- Node.jsの界隈では、機能ごとに分割されたJavaScriptファイルのことを一般的に「モジュール」と呼ぶ
- webpack関連のファイルは変更したらコンパイルする必要がある
foreman は、Procfile を読み込み、複数のプロセスを管理できるツール。
RailsのAPI作成はだいぶ楽そうだけど手順がよくわかっていない。
- これは別でやればいいと思うから飛ばす
classList
: class属性のトークンリストを返す#finished-tasks
を引っ張ってきて、.display_none
の追加削除を交互に行うことで表示非表示を行う