Nuxt.js プロジェクト作成手順とフォルダの種類
プロジェクト作成
vue init nuxt-community/starter-template my-app
パッケージのインストール
cd my-app
yarn #パッケージのインストール
yarn dev #サーバー起動
ディレクトリ構造
assets
画像、css(scss)、Javascriptの管理。
webpackでコンパイルなどしたいファイルを置く。
components
Vueコンポーネントの管理。
pages
ルーティングに対応したコンポーネントの管理。
_id.vueとすれば動的なページ生成に役立つコンポーネントが作れる。
(例: pages/users/_id.vueとは、localhost:3000/users/hogeでアクセス可)
階層を意識すること。
static
静的なリソースの管理。
faviconやogp画像などwebpackで変換しないようなそのまま公開したいファイルを入れよう。
plugins
全ページに共通の処理を使用したい場合、自作した例えばcommon.jsなどを作り、nuxt.config.jsでパスを記入し適用できる。
store
Vuexの管理。
index.jsを手動で作成して、
import Vuex from 'vuex'
として読み込む。
layouts
共通部分テンプレート。
初期はdefault.vueが参照されており、<nuxt />がpagesフォルダ内vueファイルのテンプレートがurlごとそれぞれ差し込まれる。
例えば個別ページ用に共通部分を新たに定義したい場合は、single.vueを作成して適用したいpagesのscriptに
export default{
layout: "single"
}
と書けばそのページはlayouts/single.vueのテンプレートが適用される。
この記事が気に入ったらサポートをしてみませんか?