Nuxt.js｜初期設定

  • 投稿日
  • 著者 kngsmym
  • カテゴリー Nuxt.js

以下は一例であり、初期設定のやり方は色々。

プロジェクト作成

適当なワークフォルダに移動し、ターミナルで以下を入力

$ npx create-nuxt-app <project-name>

または

$ npm init nuxt-app <project-name>

色々聞かれるけど基本はほぼデフォルトで送ってOK。
でも使用するpackage managerにnpmを指定すればライブラリのインストールが自動で行われるのでちゃんと答える。

? Package manager: Npm

成功したら指定したプロジェクト名のフォルダができて、その中にpackage.jsonとNuxt.jsに必要なファイルが配置される。

エラーが出る場合がある

Package exports for '/Users/kngsmym/.npm/_npx/3995/lib/node_modules/create-nuxt-app/node_modules/cac' do not define a valid '.' target

node.jsのバージョンによるらしい。
node.jsのバージョンを14にあげたら行けた。
以下、nodebrewで行う場合。

$ nodebrew install 14
$ nodebrew use 14
$ node -v
v14.15.1

nodeのパッケージ追加

設定ファイル作るときにEnterですっ飛ばしたらここまでの時点でまだ必要なライブラリなどが無いのでその場合は手動でインストールしたら動く。

$ cd <project-name>
$ npm install

Nuxt起動

$ cd <project-name>
$ npm run dev

ゴニョゴニョと表示され、以下が表示されれば、localhost:3000でサイトが見られるようになる。

ℹ Listening on: http://localhost:3000/ 

ファイルをいじって保存したら自動的に反映される。
開発環境の出来上がり。

Nuxt Vue