Nuxt.jsの基礎勉強~ create-nuxt-appでプロジェクトの作成やファイル構造~

はじめに

今回はVue.jsのステップアップとしてNuxt.jsの勉強を行なったので、それについてまとめていこうと思う。

npmのinstall

npmが入ってなかったのでnpmの環境設定をした。(詳しくは以下の記事に記載しました) - npxコマンドを使うためにNode.jsをインストールした話

create-nuxt-app を用いたプロジェクトの作成

新規プロジェクトを立ち上げる時の質問

質問	意味
Project name	今回作るプロジェクト名-基本そのままでいい-
Programming language:	扱う言語-JavaScriptを選択-
Package manager:	扱うパッケージ-今回はnpmを選択-
UI framework:	扱うUI フレームワーク -今回はnone-
Nuxt.js modules:	扱うモジュール -今回はaxios-
Linting tools:	コードチェックするためにEsLintを指定
Testing framework:	テストに扱うフレームワークを指定
Rendering mode:	レンダリングモードの選択-Vue.jsやNuxt.jsのみで作る予定ならUniversal-
Deployment target:	デプロイする環境を設定
Development tools:	開発に使うツールを設定

ファイル構造

大まかなファイル構造以下の様なっている。特に重要だと思うディレクトリについては別途説明する。

.
├── README.md
├── assets
├── components
├── layouts
├── middleware
├── node_modules
├── nuxt.config.js
├── package-lock.json
├── package.json
├── pages
├── plugins
├── static
└── store

assets

スタイルシートや画像を管理するディレクトリ

components

componentを書いたファイルを管理するディレクトリ

pages

viewを作るファイルを保管する場所で、ここで作ったファイルによってパスが自動に生成される。

例) index.vue だと /のページのviewに該当し、hoge.vueだと./hogeに該当する

plugins

外部からインストールしたプラグインを管理しておくディレクトリ

store

vuexを用いてデータ操作を行う場合の操作を記述するソースを管理しておくディレクトリ

終わりに

今回はNuxt.jsのディレクトリ構造について勉強したので、次回からは実際に触っていこうと思う。