Vue.jsのフレームワークとして、いろいろあるが、今回はvue-cliとNuxt.jsについて比較してみたいと思う。
ファイル構成や標準で用意されてるものが異なるので、整理用の記事となります。
フレームワークを移行したい時にみていただけるといいかもしれません。
ディレクトリやファイル構成
vue-cli
| ファイルパス | 役割 |
|---|---|
| ./index.html | 静的ファイル |
| ./src/main.js | 静的ファイルのJS / Vueインスタンスの作成 |
| ./src/App.vue | 動的テーマ |
| ./src/components/Hello.vue | 動的部品 |
| ./src/router/index.js | ルーティング |
| ./src/store/index.js | 状態管理 |
| ./dist | 本番用のファイル群 |
Nuxt.js
| ディレクトリ | 格納するファイル | ファイル例 |
|---|---|---|
| assets | CSSや画像やフォントなど | headerImage.jpg |
| components | コンポーネントファイル | Logo.vue(デフォルト)/ Header.vue / Footer.vue |
| layouts | サイトの基盤となる全体共通のデザイン | default.vue |
| pages | 切り替えたい画面 / ルーティングは自動で行われる | index.vue(/) / about.vue(/about) |
| middleware | 画面を読み込む前に処理したい内容 | |
| plugins | Vue.jsアプリをインスタンス化する前に実行したいJSファイル | axios.js |
| static | 変更されない静的ファイル | favicon.ico |
| store | 状態を格納してくれる機能（Vuexストア）のファイル | index.js |
最大の違いともいえるのが、Nuxt.jsは自動でルーティング設定を行ってくれるところ。
| vue-cli | Nuxt.js | |
|---|---|---|
| ルーティング設定 | 手動 | 自動 |
| ルーティングを司るファイル | router/index.js | .nuxt/router.js |
プロジェクトを生成した時に必要なもの
必要なものは、挙げればキリがないのだが、とりあえず必要なのはルーティングするvue-routerと、状態管理するVuexをみていく。
標準装備されているか。
| vue-cli | Nuxt.js | |
|---|---|---|
| vue-router | × | ○ |
| Vuex | × | ○ |