NuxtJS でのプロジェクトの作成方法を説明していきたいと思います。
今回は SPA ( Single Page Application )で Web アプリを作っていきたいと思います。
前提条件
node : 最新版を使用します。
npm : 最新版を使用します。
Node.js と npm は事前にインストールしておく必要があります。
Node.js のインストール方法は下の記事か本家サイトを参考にインストールしてください。
Node.js がインストールできたら下記のコマンドを実行して npm をインストールします。
$ npm install -g npmNuxtJS のプロジェクトを新規に作成する
下記のコマンドを実行して 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 creati...
github.com
最後に
コマンドラインで質問された順に設定していくだけで簡単に NuxtJS のプロジェクトを作成することができました。興味がある方は是非試してみてください。
コメント