Nuxt.jsのディレクトリ構成 #nuxtjs #vuejs

vue-cliからテンプレートプロジェクトを作ると、ディレクトリがいくつも作られるのだが、それぞれの役割についてわかったこと。

基本的には↓に書いてあるけど。

$ vue init nuxt-community/starter-template nuxt-example

nuxt-example
├── assets
├── components
├── layouts
├── middleware
├── node_modules
├── pages
├── plugins
├── static
└── store

Webpackで扱う静的ファイルを配置する。

CSS系（LESS/SASS）やJavaScript、画像ファイルなんかが置かれるっぽい。

WebpackはCSSやJSファイルをひとまとめにしてくれるやつ。

画像ファイルはBase64形式にしてくれるみたい。

部品的なvueファイル（コンポーネント）を配置する。

例えば MenuBar.vue みたいなやつになるだろうか。

layoutやpageでimportして使うようになると思われる。

とうもVue.js(Nuxt.js)ではtemplateとscriptを同じファイルに書くようだ。

hoge.jsとhoge.htmlのように、スクリプトとテンプレートを分けるイメージがあったのでカルチャーショック。。

default.vueを用意しておくと、pageのレイアウトのベースになる。

layoutといいつつ、bodyタグの中身だけのイメージ。

htmlレベルのテンプレートはルートディレクトリに app.html を用意するらしい。

デフォルト以外のlayoutを別名で用意した場合は、個別にpage側で使用するlayoutを指定してあげる。

あるページ（のグループ）がレンダリングされる前に実行されるような処理を定義することができるらしい。

AOP的なことをやりたいときはここを使う模様。

（例ではauthが挙げられていた）

npm install した色々が入るところ。

実際にアプリケーションのビューになるようなvueファイルを配置する。

ファイルの名前や階層がそのままURLのルーティングになる。

なおElementUIというVue.js用のコンポーネント集みたいなものがあるらしい。

それを使えばBootstrapみたいに簡単にそれなりのデザインで画面が作れそう？

ここは正直良くわからない。。横断的に使うようなライブラリとかパッケージが必要になった場合に使うのかなぁ。

Webpack で扱わない静的ファイルを配置する。

robots.txtとか、sitemap.xmlとか、faviconだったりが該当すると思われる。

Vuexとやらを使う時に必要になるらしい。

Vuexは複数のコンポーネントの状態管理を楽にしてくれるもののよう。

例えばあるアクション（操作）をした場合に、コンポーネントAとコンポーネントBの状態が変化する、みたいなときに有効みたい。