NUXTJSでプロジェクトを作成する

8347 ワード
nuxt nuxt.js nuxt.js テキストリンク

この記事の概要

NUXTJSでのプロジェクト作成手順をお伝えします！

この記事のゴール

NUXTJSのプロジェクトを作成し、localhostで起動ができる。

NUXTJSについて

プロジェクトの作成手順をお伝えする前に、まずはNUXTJSについて簡単に説明します。

NUXTJSは、Webアプリケーション開発のためのフレームワークです。

Vue.jsをベースとしています。

「Vue.js」 + 「Webアプリケーション開発に必要な機能」がまとめられたフレームワークといった印象です。

詳細は、下記公式サイトをご覧ください。

作成手順

1. 任意のディレクトリでCUIを起動

今回はsampleディレクトリとします。

2. コマンドの実行

下記コマンドを実行してください。
npx create-nuxt-app <project-name>

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です！

【参考】
https://ja.nuxtjs.org/guide/installation/