前のパートに戻る 完了して次のパートへ  

  1-1 Nuxt アプリケーションの作成

この章では Nuxt の環境を構築し、ブラウザで Welcome ページを表示するところまで行いたいと思います。

アプリケーション作成


まず、 terminal を起動し、お好きなディレクトリに移動します。

$ cd techpit

公式が用意している手順でアプリケーションを作成していきましょう。

以下のコマンドを実行します。 この chat となっている箇所はプロジェクトの名前なのでなんでも構いません。 お好きな名前をつけて実行してください。今回はシンプルに chat とします。

$ npx create-nuxt-app chat

実行すると対話形式でアプリケーションの設定を決めることが出来ます。 最初にプロジェクトの名前を聞いてきます。先程入力した chat が初期値として入っています。最初に入力したものから別の名前にしたい場合は、ここで入力して変更出来ます。 今回は特に変更しないので、このまま Enter で次に進みます。

create-nuxt-app v2.14.0
✨  Generating Nuxt.js project in chat
? Project name chat

次にプロジェクトの説明を聞いてきます。 初期値として My premium Nuxt.js project が入っています。変更したい場合はこちらで入力しましょう。今回は特に変更しないので、このまま Enter で次に進みます。

$ npx create-nuxt-app chat
create-nuxt-app v2.11.1
✨  Generating Nuxt.js project in chat
? Project name chat
? Project description (My premium Nuxt.js project)

次に作者の名前を聞いてきます。こちらもなんでもいいので自分の名前を入れましょう

create-nuxt-app v2.14.0
✨  Generating Nuxt.js project in chat
? Project name chat
? Project description My premium Nuxt.js project
? Author name techpit

次にパッケージマネージャーを選択します。 どちらでも問題ないですが、今回は Npm にしましょう。

create-nuxt-app v2.14.0
✨  Generating Nuxt.js project in chat
? Project name chat
? Project description My premium Nuxt.js project
? Author name techpit
? Choose the package manager (Use arrow keys)
❯ Yarn
  Npm

次に UI 用のフレームワークを選択します。 今回は Tailwind CSS を使いたいと思うので、こちらを選択しましょう。

create-nuxt-app v2.14.0
✨  Generating Nuxt.js project in chat
? Project name chat
? Project description My premium Nuxt.js project
? Author name techpit
? Choose the package manager Npm
? Choose UI framework
  None
  Ant Design Vue
  Bootstrap Vue
  Buefy
  Bulma
  Element
  Framevuerk
  iView
  Tachyons
❯ Tailwind CSS
  Vuesax
  Vuetify.js

次にサーバーサイドのフレームワークを選択します。 今回は使用しないので none のままで次に進みます。

create-nuxt-app v2.14.0
✨  Generating Nuxt.js project in chat
? Project name chat
? Project description My premium Nuxt.js project
? Author name techpit
? Choose the package manager Npm
? Choose UI framework Tailwind CSS
? Choose custom server framework (Use arrow keys)
❯ None (Recommended)
  AdonisJs
  Express
  Fastify
  Feathers
  hapi
  Koa
  Micro

次に Nuxt で使用するモジュールを選択します。今回は何も使用しないのでそのまま Enter で次に進みましょう

create-nuxt-app v2.14.0
✨  Generating Nuxt.js project in chat
? Project name chat
? Project description My premium Nuxt.js project
? Author name techpit
? Choose the package manager Npm
? Choose UI framework Tailwind CSS
? Choose custom server framework None (Recommended)
? Choose Nuxt.js modules (Press <space> to select, <a> to toggle all, <i> to invert selection)
❯◯ Axios
 ◯ Progressive Web App (PWA) Support
 ◯ DotEnv

次に Lint ツールを選択します。 今回は何も使用しないのでそのまま Enter で次に進みましょう (通常のフロントエンドの開発ではLintツールを導入しますが、今回は説明の都合上使用しません)

create-nuxt-app v2.14.0
✨  Generating Nuxt.js project in chat
? Project name chat
? Project description My premium Nuxt.js project
? Author name techpit
? Choose the package manager Npm
? Choose UI framework Tailwind CSS
? Choose custom server framework None (Recommended)
? Choose Nuxt.js modules (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Choose linting tools
 ◯ ESLint
 ◯ Prettier
 ◯ Lint staged files
 ◯ StyleLint

次にテストフレームワークを選択します。 Jest を選択しましょう。

create-nuxt-app v2.14.0
✨  Generating Nuxt.js project in chat
? Project name chat
? Project description My premium Nuxt.js project
? Author name techpit
? Choose the package manager Npm
? Choose UI framework Tailwind CSS
? Choose custom server framework None (Recommended)
? Choose Nuxt.js modules (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Choose linting tools ESLint, Prettier
? Choose test framework
  None
❯ Jest
  AVA

次に Nuxt のモードを選択します。Single Page App を選択しましょう。

create-nuxt-app v2.14.0
✨  Generating Nuxt.js project in chat
? Project name chat
? Project description My premium Nuxt.js project
? Author name techpit
? Choose the package manager Npm
? Choose UI framework Tailwind CSS
? Choose custom server framework None (Recommended)
? Choose Nuxt.js modules (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Choose linting tools ESLint, Prettier
? Choose test framework Jest
? Choose rendering mode
  Universal (SSR)
❯ Single Page App

最後に VScode 用の設定ファイルを作成するか聞いてきます。 (エディターとして VScode を使用している場合は追加しても良いでしょう。)

create-nuxt-app v2.14.0
✨  Generating Nuxt.js project in chat
? Project name chat
? Project description My premium Nuxt.js project
? Author name techpit
? Choose the package manager Npm
? Choose UI framework Tailwind CSS
? Choose custom server framework None (Recommended)
? Choose Nuxt.js modules (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Choose linting tools ESLint, Prettier
? Choose test framework Jest
? Choose rendering mode Single Page App
? Choose development tools
❯◉ jsconfig.json (Recommended for VS Code)
 ◯ Semantic Pull Requests

全て選択すると以下のようにインストールが開始されます。

create-nuxt-app v2.14.0
✨  Generating Nuxt.js project in chat
? Project name chat
? Project description My premium Nuxt.js project
? Author name techpit
? Choose the package manager Npm
? Choose UI framework Tailwind CSS
? Choose custom server framework None (Recommended)
? Choose Nuxt.js modules (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Choose linting tools ESLint, Prettier
? Choose test framework Jest
? Choose rendering mode Single Page App
? Choose development tools jsconfig.json (Recommended for VS Code)
⠧ Installing packages with npm

インストールが完了すると以下のように案内が表示されます。

🎉  Successfully created project chat

  To get started:

	cd chat
	npm run dev

  To build & start for production:

	cd chat
	npm run build
	npm run start

以上で今回のパートは終了です。

お疲れ様でした。

議論

0 質問

このコースの評価は?