ソフトウェア開発プログラミング

[NuxtJS]NuxtJS入門

ソフトウェア開発
この記事は約11分で読めます。
スポンサーリンク

NuxtJSでのプロジェクトの作成方法を説明していきたいと思います。

今回はSPA(Single Page Application)でWebアプリを作っていきたいと思います。

スポンサーリンク

前提条件

node:最新版を使用します。
npm:最新版を使用します。

Node.jsnpmは事前にインストールしておく必要があります。

Node.jsのインストール方法は下の記事か本家サイトを参考にインストールしてください。

MacにNode.jsをインストールする
AngularJSの勉強してみようと思って、環境構築の方法を調べてたら、Node.jsをインストールする必要があるみたいなので、実際にインストールした時の手順をまとめました。AngularJSの環境構築にはNode.jsの他にnpmの設...
Node.js
Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

Node.jsがインストールできたら下記のコマンドを実行してnpmをインストールします。

$ npm install -g npm

NuxtJSのプロジェクトを新規に作成する

下記のコマンドを実行してNuxtJSのプロジェクトを作成します。

$ npm init nuxt-app <project-name>

するとプロジェクトの作成が開始され、色々設定を確認されるので、自身の環境に応じた設定を選択していきます。

create-nuxt-app v4.0.0
✨  Generating Nuxt.js project in nuxt-sample
? Project name: (nuxt-sample) # プロジェクト名(デフォルトでOK)
? Programming language: # 今回はTypeScriptを選択します
  JavaScript
❯ TypeScript
? Package manager: # パッケージマネージャーはNpmを選択
  Yarn
❯ Npm
? UI framework: # UIフレームワークはVuetify.jsを今回は選択しました
  None
  Ant Design Vue
  BalmUI
  Bootstrap Vue
  Buefy
  Chakra UI
  Element
  Oruga
  Primevue
  Tachyons
  Tailwind CSS
  Windi CSS
  Vant
  View UI
❯ Vuetify.js
? Nuxt.js modules: # 今回はAxiosとPWAモジュールを有効にします
 ◉ Axios - Promise based HTTP client
❯◉ Progressive Web App (PWA)
 ◯ Content - Git-based headless CMS
? Linting tools: # あくまでサンプルなのでESLint,Prettierのみ選択しておきます
 ◉ ESLint
❯◉ Prettier
 ◯ Lint staged files
 ◯ StyleLint
 ◯ Commitlint
? Testing framework: # テスティングフレームワークはJestを選択
  None
❯ Jest
  AVA
  WebdriverIO
  Nightwatch
? Rendering mode: # 今回はSingle Page Appを選択します
  Universal (SSR / SSG)
❯ Single Page App
? Deployment target: # Staticを選択します
  Server (Node.js hosting)
❯ Static (Static/Jamstack hosting)
? Development tools: # とりあえずjsconfig.jsonだけ選択しておきます
❯◉ jsconfig.json (Recommended for VS Code if you are not using typescript)
 ◯ Semantic Pull Requests
 ◯ Dependabot (For auto-updating dependencies, GitHub only)
? Continuous integration: # CIツールはGithub Actionsを選択
  None
❯ GitHub Actions (GitHub only)
  Travis CI
  CircleCI
? What is your GitHub username? (ユーザ名)
# ユーザ名を確認されるので表示されているユーザ名で問題なければそのままEnter、違うユーザを使用したい場合はユーザ名を入力する
? Version control system: (Use arrow keys) # Gitを選択します
❯ Git
  None

プロジェクト作成時に設定した内容は後から変更可能です。自分の開発にあわせた設定を選択しプロジェクトを作成すれば良いです。

🎉  Successfully created project nuxt-sample

  To get started:

    cd nuxt-sample
    npm run dev

  To build & start for production:

    cd nuxt-sample
    npm run build
    npm run start

  To test:

    cd nuxt-sample
    npm run test


  For TypeScript users.

  See : https://typescript.nuxtjs.org/cookbook/components/

こんな感じのメッセージが表示されればプロジェクトの作成に成功しています。

動作確認してみる

下記のコマンドを実行すれば始められるみたいです。

  To get started:

    cd nuxt-sample
    npm run dev

コマンド実行してみます。

# 作成したプロジェクト名のディレクトリに移動
$ cd nuxt-sample

# 実行!!
$ npm run dev

するとこんな感じで実行されます。

> nuxt-sample@1.0.0 dev /Users/koichiezato/Projects/nuxt/nuxt-sample
> nuxt


   ╭───────────────────────────────────────╮
   │                                       │
   │   Nuxt @ v2.15.8                      │
   │                                       │
   │   ▸ Environment: development          │
   │   ▸ Rendering:   client-side          │
   │   ▸ Target:      static               │
   │                                       │
   │   Listening: http://localhost:3000/   │
   │                                       │
   ╰───────────────────────────────────────╯

ℹ Preparing project for development                                                                                                                                                                                                                                                                                 17:26:57
ℹ Initial build may take a while                                                                                                                                                                                                                                                                                    17:26:57
ℹ Discovered Components: .nuxt/components/readme.md                                                                                                                                                                                                                                                                 17:26:57
✔ Builder initialized                                                                                                                                                                                                                                                                                               17:26:57
✔ Nuxt files generated                                                                                                                                                                                                                                                                                              17:26:57

✔ Client
  Compiled successfully in 6.35s

No issues found.                                                                                                                                                                                                                                                                                                    17:27:04
ℹ Waiting for file changes                                                                                                                                                                                                                                                                                          17:27:04
ℹ Memory usage: 410 MB (RSS: 2.52 GB)                                                                                                                                                                                                                                                                               17:27:04
ℹ Listening on: http://localhost:3000/                                                                                                                                                                                                                                                                              17:27:04

この状態で「http://localhost:3000/」へアクセスします。

無事サイトを表示することができました!!

今回作成したプログラムはこちらから確認することができます。

GitHub - koichi-ezato/nuxt-sample at NuxtJS入門
Contribute to koichi-ezato/nuxt-sample development by creating an account on GitHub.

最後に

コマンドラインで質問された順に設定していくだけで簡単にNuxtJSのプロジェクトを作成することができました。興味がある方は是非試してみてください。

スポンサーリンク
スポンサーリンク
スポンサーリンク
KoEをフォローする
CodeLab

コメント

タイトルとURLをコピーしました