search
LoginSignup
12

More than 1 year has passed since last update.

posted at

【Vue.js】vue-cliとNuxt.jsの比較まとめ

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 ×

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
12