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のテンプレートが適用される。

この記事が気に入ったらサポートをしてみませんか?