デフォルトの Nuxt.js アプリケーションの構造は、小規模のアプリケーションと大規模のアプリケーションのどちらにも適しています。もちろん、好きなように構成することもできます。
assets
ディレクトリには Stylus や SASS、 Image、 Font のようなコンパイルされていないファイルを入れます。
アセットの取り扱いについてより深く理解するには アセットに関するドキュメント を参照してください。
components
ディレクトリには Vue.js のコンポーネントファイルを入れます。これらのコンポーネントでは asyncData
や fetch
を使うことはできません。
layouts
ディレクトリはアプリケーションのレイアウトを含みます。レイアウトはページの外観を変更するために使用されます(例えばサイドバーなど)。
レイアウトの取り扱いついてより深く理解するには レイアウトに関するドキュメント を参照してください。
このディレクトリは特別な設定なしでは名前を変更できません。
middleware
ディレクトリにはアプリケーションのミドルウェアを入れます。ミドルウェアを使って、ページやページグループ(レイアウト)をレンダリングするよりも前に実行されるカスタム関数を定義できます。
ミドルウェアについてより深く理解するには ミドルウェアに関するドキュメント を参照してください。
pages
ディレクトリにはアプリケーションのビュー及びルーティングファイルを入れます。Nuxt.js フレームワークはこのディレクトリ内のすべての .vue
ファイルを読み込み、アプリケーションのルーターを作成します。
このディレクトリは特別な設定なしでは名前を変更できません。
ページの取り扱いについてより深く理解するには ページに関するドキュメント を参照してください。
plugins
ディレクトリには、ルートの Vue.js アプリケーションをインスタンス化する前に実行したい JavaScript プラグインを入れます。 ここはコンポーネントをグローバルに登録したり、関数や定数を挿入するための場所です。
プラグインについてより深く理解するには プラグインに関するドキュメント を参照してください。
static
ディレクトリは直接サーバのルートに配置され(/static/robots.txt
は http://localhost:3000/robots.txt
でアクセス可能です)、変更されない可能性の高いファイルが含まれています(例えば、favicon など)。
例: /static/robots.txt
は /robots.txt
に配置されます。
このディレクトリは特別な設定なしでは名前を変更できません。
静的ファイルの取り扱いについてより深く理解するには 静的ファイルに関するドキュメント を参照してください。
store
ディレクトリには Vuex ストア のファイルを入れます。Vuex ストアは Nuxt.js に付属していますが、デフォルトでは無効になっています。このディレクトリに index.js
ファイルを作成するとストアが有効になります。
このディレクトリは特別な設定なしでは名前を変更できません。
ストアの取り扱いについてより深く理解するには ストアに関するドキュメント を参照してください。
nuxt.config.js
ファイルには Nuxt.js のカスタム設定を記述します。
このディレクトリは特別な設定なしでは名前を変更できません。
nuxt.config.js
についてより深く理解するには nuxt.config.js に関するドキュメント を参照してください。
package.json
ファイルにはアプリケーションが依存するパッケージやスクリプトを記述します。
このファイル名は変更できません。
エイリアス | ディレクトリ |
---|---|
~ or @ |
srcDir |
~~ or @@ |
rootDir |
デフォルトでは srcDir
は rootDir
と同じです。
情報: vue
テンプレート内で assets
または static
ディレクトリへのリンクが必要なときは ~/assets/your_image.png
や ~/static/your_image.png
などを使ってください。
間違いを見つけた、またはドキュメントに貢献したいですか? GitHub でこのページを編集する