nuxt.jsとは？
公式ページをみるのが一番わかる
って言ってしまうと終わりなので、現状の自分的な解釈を述べるなら
Ruby → Ruby on rails
Vue.js → Nuxt.js
の関係性って感じ。
Vue.jsで開発しようと思ったらだいたい必要になるものを最初からいろいろ含めた状態で生成してくれて、よく使う機能は自動で生成してくれたり、ある程度開発に規則を設けることでその分nuxt側で勝手にやってくれるようになってる みたいな？
実際まだ何も使ってないけど、公式サイト見た感じはそんな印象。
自分で勝手に作ってるといろいろとどこに書いたかわからなくなってしまうというのはよくあることなので（？）ある程度ルールで縛られていたほうが楽でいいってのはある。
余談だけど、
実際、Nuxt.jsを今こうやって触ろうとしているのも、もともとVue.jsでサイト作ってたんだけど、２か月ほど放置していたせいで、自分で何をやってたかわからなくなってしまったのと、後々自分で見返せるようにやったことまとめておきたかったので、いっそのことNuxtに乗せ換えてここにその内容を残そうと思ったわけです。
とにもかくにもプロジェクトの生成
筆者の環境はすでにnpmとかもろもろのセットアップは終わってる。
きっとググれば出てくるだろう。ここは省略。Vue.jsのセットアップをやっておくこと。
> npx create-nuxt-app "project-name"
npx: 377個のパッケージを74.73秒でインストールしました。
create-nuxt-app v2.8.0
✨ Generating Nuxt.js project in C:\Users\YM\Desktop\vue\monosashi-nuxt
? Project name monosashi-nuxt
? Project description My impeccable Nuxt.js project
? Author name yaizaaaa
? Choose the package manager Yarn
? Choose UI framework Vuetify.js
? Choose custom server framework None (Recommended)
? Choose Nuxt.js modules Axios, Progressive Web App (PWA) Support
? Choose linting tools (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Choose test framework AVA
? Choose rendering mode Universal (SSR)
'yarn' �́A�����R�}���h�܂��͊O���R�}���h�A
����\�ȃv���O�����܂��̓o�b�` �t�@�C���Ƃ��ĔF������Ă��܂���B
- Installing packages with yarnTrace: { Error: spawn yarn ENOENT
at notFoundError (C:\Users\YM\AppData\Roaming\npm-cache\_npx\20164\node_modules\create-nuxt-app\node_modules\cross-spawn\lib\enoent.js:6:26)
at verifyENOENT (C:\Users\YM\AppData\Roaming\npm-cache\_npx\20164\node_modules\create-nuxt-app\node_modules\cross-spawn\lib\enoent.js:40:16)
at ChildProcess.cp.emit (C:\Users\YM\AppData\Roaming\npm-cache\_npx\20164\node_modules\create-nuxt-app\node_modules\cross-spawn\lib\enoent.js:27:25)
at Process.ChildProcess._handle.onexit (internal/child_process.js:240:12)
code: 'ENOENT',
errno: 'ENOENT',
syscall: 'spawn yarn',
path: 'yarn',
spawnargs: [ 'install' ] }
at sao.run.catch (C:\Users\YM\AppData\Roaming\npm-cache\_npx\20164\node_modules\create-nuxt-app\cli.js:18:13)
at process._tickCallback (internal/process/next_tick.js:68:7)
生成されるディレクトリの説明
実際ここも公式ページを読み込めばいいね
~/
├─assets
│ └─style
Stylus や SASS、 Image、 Font のようなコンパイルされていないファイルを入れます。
├─components
components ディレクトリには Vue.js のコンポーネントファイルを入れます。
これらのコンポーネントでは asyncData や fetch を使うことはできません。
├─layouts
layouts ディレクトリはアプリケーションのレイアウトを含みます。
├─middleware
アプリケーションのミドルウェアを入れます。ページやページグループ（レイアウト）をレンダリングするよりも前に実行されるカスタム関数を定義できます。
├─pages
アプリケーションのビュー及びルーティングファイルを入れます。
├─plugins
コンポーネントをグローバルに登録したり、関数や定数を挿入するための場所
├─static
ディレクトリは直接サーバのルートに配置され（/static/robots.txt は http://localhost:3000/robots.txt でアクセス可能です）
├─store
Vuex ストア のファイルを入れます。
└─test
├─helpers
└─specs
テスト用ファイルを入れます。