Nuxt npmを使ったインストール方法 -

今回はnpmを使ったNuxtのインストール方法の紹介を行います。

参考

NuxtJSの公式ドキュメント

インストール

ここでは、4 つのステップで、Nuxt プロジェクトを立ち上げで実行する方法について説明します。

参考　
&amp;lt;br />

Nuxt js のプロジェクトを作るのに必要なもの
1. テキストエディタ, ターミナル
2. node
インストール方法について
Nuxtの起動方法

Nuxt js のプロジェクトを作るのに必要なもの

必要なものは3つです。

テキストエディタ
ターミナル
node

テキストエディタ, ターミナル

テキストエディタについては公式でおすすめしている VS Code がおすすめ
プラグインについては、Veturを入れておくといいと思います。

デフォルトでターミナルがついているので、ターミナルはVS Codeについているものをおすすめします。

node

Node jsが入っていないとNuxtのプロジェクトを使うことができませんので、予めインストールが必要です。

インストール方法について

npm を使ったインストール方法です。

yarn, npxのインストール方法については公式にインストール方法があるのでそちらを参考にしてください。

nodeがインストールされていることを前提に進めて行きます。

npm init nuxt-app (project name) // プロジェクトの名前は何でもOK

例として「sample」としてプロジェクトの作成を行います。

① プロジェクト名

プロジェクトの名前が聞かれるので問題がなければ Enter

Project name: (sample)

② プログラムの選択

JSを使うかTypeScriptを使うか聞かれるので、今回はJSを選択


Programming language: (Use arrow keys)
❯ JavaScript 
  TypeScript

③ パッケージ

npmを使うので、npmを選択してEnter


Package manager: (Use arrow keys)
❯ Yarn 
  Npm

④ UI framework

UI フレームワークが聞かれるので、入れたいものを選択してEnter

今回は、特に必要ないので「none」を選択


? UI framework: 
❯ None 
  Ant Design Vue 
  BalmUI 
  Bootstrap Vue 
  Buefy 
  Chakra UI 
  Element 
  Framevuerk 
  Oruga 
  Tachyons 
  Tailwind CSS 
  Windi CSS 
  Vant 
  View UI 
  Vuetify.js

⑤ nuxt.js modules

おすすめのプラグイン的なものが表示されるので、必要なものを選択してEnter

選択する場合は、スペースを押せばチェックマークを入れれます。

試しに、HTTP通信を簡単に行うことができるライブラリの「axios」を入れてみます。


? Nuxt.js modules: 
❯◉ Axios - Promise based HTTP client
 ◯ Progressive Web App (PWA)
 ◯ Content - Git-based headless CMS

⑥ Linting tools

コードの整形ツールを入れるか選択

おすすめはESLintとPrettierです。


? Linting tools: 
 ◉ ESLint
❯◉ Prettier
 ◯ Lint staged files
 ◯ StyleLint
 ◯ Commitlint

⑦ Testing tools

テストのツールを入れるか選択

今回はテストをするようなことはしないので「none」を選択


? Testing framework: (Use arrow keys)
❯ None 
  Jest 
  AVA 
  WebdriverIO 
  Nightwatch

⑧ Rendering mode

レンダリングのモードを選択

今回はサーバーとレンダリングすることなどはないので、シングルページでいいかと思います。


? Rendering mode: 
  Universal (SSR / SSG) 
❯ Single Page App

⑨ Deployment target

ホスティングの設定をします。

今回は「Static」を選択


? Deployment target: (Use arrow keys)
❯ Server (Node.js hosting) 
  Static (Static/Jamstack hosting)

⑩ Development tools

vscodeを使う人は一番上の項目を選択するのがおすすめです。


Development tools: 
❯◉ jsconfig.json (Recommended for VS Code if you're not using typescript)
 ◯ Semantic Pull Requests
 ◯ Dependabot (For auto-updating dependencies, GitHub only)

⑪ Continuous integration

作成したものをGitHubへ上げたいので「GitHub Actions (GitHub only)」を選択

git hub にチェックを入れるとGithubのユーザーネームなどが聞かれるので、アカウントがない人やGithubを使わない人は「none」でいいと思います。


? Continuous integration: (Use arrow keys)
❯ None 
  GitHub Actions (GitHub only) 
  Travis CI 
  CircleCI

設定は以上です。選択が終わればインストールが開始されます。

正常にインストールされれば、下記のような表示がされているはずです。


🎉  Successfully created project sample

  To get started:

	cd sample
	npm run dev

  To build & start for production:

	cd sample
	npm run build
	npm run start

Nuxtの起動方法

起動は簡単です、上記でインストールしたプロジェクトのディレクトリに移動し、下記コマンドを入力するだけです。


npm run dev

起動すると(http://localhost:3000/) にアクセスできるようになります。

以上でインストールから起動までの流れは終わりです。

<br />