この記事の概要
NUXTJSでのプロジェクト作成手順をお伝えします！
この記事のゴール
NUXTJSのプロジェクトを作成し、localhostで起動ができる。
NUXTJSについて
プロジェクトの作成手順をお伝えする前に、まずはNUXTJSについて簡単に説明します。
NUXTJSは、Webアプリケーション開発のためのフレームワークです。
Vue.jsをベースとしています。
「Vue.js」 + 「Webアプリケーション開発に必要な機能」がまとめられたフレームワークといった印象です。
詳細は、下記公式サイトをご覧ください。
- NUXTJS：https://ja.nuxtjs.org/
- Vue.js：https://jp.vuejs.org/index.html
作成手順
1. 任意のディレクトリでCUIを起動
今回はsampleディレクトリとします。
2. コマンドの実行
下記コマンドを実行してください。
npx create-nuxt-app <project-name>
-
<project-name>は任意の名前でOKです（今回は、nuxt_sampleとします）。 - npxとは：https://www.npmjs.com/package/npx
3. プロジェクトの構成を設定
対話形式でプロジェクトの構成の設定を行います。
下記に記載する選択は一例ですので、状況に合わせて適宜選択してください。
① 作成するプロジェクト名を設定
- (nuxt_sample)の名前で問題なければ、そのままエンターで次へ。
- (nuxt_sample)は上記 手順2 で設定したものです。
> npx create-nuxt-app nuxt_sample
create-nuxt-app v3.6.2
✨ Generating Nuxt.js project in nuxt_sample
? Project name (nuxt_sample)
② 利用する言語を選択
- 今回は、TypeScript選択します。
? Programming language: (Use arrow keys)
> JavaScript
TypeScript
③ 利用するパッケージマネージャーを選択
- 今回はNpmを選択します。
? Package manager: (Use arrow keys)
> Yarn
Npm
④ 利用するUIフレームワークを選択
- 今回はBootstrap Vueを選択します。
- 後から変更可能です。
? UI framework: (Use arrow keys)
> None
Ant Design Vue
BalmUI
Bootstrap Vue
Buefy
Chakra UI
Element
Framevuerk
iView
Tachyons
Tailwind CSS
Vuesax
Vuetify.js
Oruga
⑤ 利用するmoduleを選択
- 今回はHTTPリクエスト用にAxiosを選択します。
- 後から変更可能です。
? Nuxt.js modules: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>( ) Axios - Promise based HTTP client
( ) Progressive Web App (PWA)
( ) Content - Git-based headless CMS
⑥ 利用する静的解析ツールを選択
- 今回はESLintとPrettierを選択します。
- 後から変更可能です。
? Choose linting tools (Press <space> to select, <a> to toggle all, <i> to invert selection)
>( ) ESLint
( ) Prettier
( ) Lint staged files
( ) StyleLint
⑦ ユニットテストのフレームワークを選択
- 今回はJestを選択します。
- 後から変更可能です。
? Testing framework: (Use arrow keys)
> None
Jest
AVA
WebdriverIO
Nightwatch
⑧ 画面の描画方法を選択
- 今回はSingle Page App（SPA）を選択します。
? Rendering mode: (Use arrow keys)
> Universal (SSR / SSG)
Single Page App
⑨ デプロイ先を選択
- 今回はServerを選択します。
? Deployment target: (Use arrow keys)
> Server (Node.js hosting)
Static (Static/JAMStack hosting)
⑩ デプロイツールを選択
- 今回は何も選択しません。
- 後から変更可能です。
? Development tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>( ) jsconfig.json (Recommended for VS Code if you're not using typescript)
( ) Semantic Pull Requests
( ) Dependabot (For auto-updating dependencies, GitHub only)
⑪ CIツールを選択
- 今回は何も選択しません。
- GitHub Actionsを選択した場合は、GitHubのユーザ名を設定する必要があります。
? Continuous integration: (Use arrow keys)
> None
GitHub Actions (GitHub only)
⑫ バージョン管理システムを選択
- 今回はGit選択します。
? Version control system: (Use arrow keys)
> Git
None
⑬ 待機！
設定が完了すると、各パッケージのインストールが開始されるので、待機します。
インストールが完了すると、直下にディレクトリが生成されます。
> ls
ディレクトリ: sample
Mode LastWriteTime Length Name
---- ------------- ------ ----
d----- 2021/04/24 17:51 nuxt_sample
nuxt_sampleはこのような構成になります。
> ls
ディレクトリ: sample\nuxt_sample
Mode LastWriteTime Length Name
---- ------------- ------ ----
d----- 2021/04/24 17:50 assets
d----- 2021/04/24 17:50 components
d----- 2021/04/24 17:50 layouts
d----- 2021/04/24 17:50 middleware
d----- 2021/04/24 17:51 node_modules
d----- 2021/04/24 17:50 pages
d----- 2021/04/24 17:50 plugins
d----- 2021/04/24 17:50 static
d----- 2021/04/24 17:50 store
d----- 2021/04/24 17:50 test
-a---- 2021/04/24 17:50 212 .babelrc
-a---- 2021/04/24 17:50 207 .editorconfig
-a---- 2021/04/24 17:51 314 .eslintrc.js
-a---- 2021/04/24 17:50 1253 .gitignore
-a---- 2021/04/24 17:50 43 .prettierrc
-a---- 2021/04/24 17:51 438 jest.config.js
-a---- 2021/04/24 17:51 1277 nuxt.config.js
-a---- 2021/04/24 17:51 637400 package-lock.json
-a---- 2021/04/24 17:51 1127 package.json
-a---- 2021/04/24 17:50 349 README.md
-a---- 2021/04/24 17:50 604 tsconfig.json
4. 動作確認
nuxt_sample配下でnpm run devを実行します。
http://localhost:3000/にアクセスし、以下の画面が出ればOKです！
