Nuxt.jsをはじめよう - Nuxt.jsのプロジェクトを新規作成する

javascript
Nuxt.jsをはじめよう - Nuxt.jsのプロジェクトを新規作成する
目次

前回の記事 では Nuxt.jsを使う前の注意点をかるっとまとめました。 今回は Nuxt.js を使って新規プロジェクトの作成をやってみます。

動作環境

  • Node 12.4.0
    • npx コマンドを使うためには Node 5.2 以上が必要です。

Nuxt.jsプロジェクトの新規作成

以下では nuxt-test という名前のプロジェクトを作成します。

1npx create-nuxt-app nuxt-test

コマンド実行後、プロジェクト初期化のための情報を聞かれるので対話形式で入力していきます。

UIフレームワークはいっぱい選択できるので迷ってしまいます。ぱっと目を通したところ、コンポーネントの多さで言えば BuefyとElement あたりが有用そうでした。

 1✨  Generating Nuxt.js project in nuxt-test
 2? Project name nuxt-test
 3? Project description My impressive Nuxt.js project
 4? Author name soudegesu
 5? Choose the package manager Npm
 6? Choose UI framework Buefy
 7? Choose custom server framework None (Recommended)
 8? Choose Nuxt.js modules Axios, Progressive Web App (PWA) Support
 9? Choose linting tools Prettier
10? Choose test framework Jest
11? Choose rendering mode Single Page App

初期化が完了すると、最後にローカル環境の起動コマンドやテスト実行コマンドが表示されます。

 1🎉  Successfully created project nuxt-test
 2
 3  To get started:
 4
 5	cd nuxt-test
 6	npm run dev
 7
 8  To build & start for production:
 9
10	cd nuxt-test
11	npm run build
12	npm run start
13
14  To test:
15
16	cd nuxt-test
17	npm run test

Nuxt.jsプロジェクトのローカル環境での起動

さっそく起動コマンドを実行してみましょう。

1cd nuxt-test
2npm run dev

ブラウザで http://localhost:3000 にアクセスします。

Buefy のデフォルト画面が表示されていればOKです。

Nuxt.jsプロジェクトのディレクトリ構成

ディレクトリ構成を見てみましょう。Nuxt.js がめっちゃ生成していることがわかります。

 1tree -L 1
 2
 3.
 4├── README.md
 5├── assets
 6├── components
 7├── jest.config.js
 8├── layouts
 9├── middleware
10├── node_modules
11├── nuxt.config.js
12├── package-lock.json
13├── package.json
14├── pages
15├── plugins
16├── static
17├── store
18└── test

ディレクトリごとに配置すべきリソースは決まっているので、 それぞれの用途は ディレクトリ構造 - Nuxt.js を見れば確認できます。

参考にさせていただいたサイト