Nuxt.js環境構築まとめ

公式ドキュメントを参考にNuxt3をインストールした
https://v3.nuxtjs.org/getting-started/quick-start/

node.jsの更新

nというツールでバージョンを管理する

npm install -g n

これで安定版のバージョンが出る

sudo n --stable

アップデートを実行

sudo n stable

installing : node-v16.17.0
       mkdir : /usr/local/n/versions/node/16.17.0
       fetch : https://nodejs.org/dist/v16.17.0/node-v16.17.0-darwin-arm64.tar.xz
     copying : node/16.17.0
   installed : v16.17.0 (with npm 8.15.0)

nuxt.jsのインストール

npxコマンドで新規プロジェクト作成。

npx nuxi init {projectName}

npxの詳細はこちらを参考。

npxコマンドとは？ 何ができるのか？

実行結果。途中でnuxiというCLIのインストールを要求されるのでy。

$ npx nuxi init nuxt-app

Need to install the following packages:
  nuxi@3.0.0-rc.8
Ok to proceed? (y) y
Nuxt CLI v3.0.0-rc.8                                                                                                                 11:16:20
ℹ cloned nuxt/starter#v3 to /Users/nishidayuutarou/Desktop/eishin/karte-user-front/nuxt-app                                          11:16:21
                                                                                                                                     11:16:21
 ✨ Your ace Nuxt project is just created! Next steps:

 📁  cd nuxt-app                                                                                                                     11:16:21

 💿  Install dependencies with npm install or yarn install or pnpm install --shamefully-hoist                                        11:16:21

 🚀  Start development server with npm run dev or yarn dev or pnpm run dev                                                           11:16:21

プロジェクト作成に成功すると以下のようになる

nuxt-app $ ls -l
-rw-r--r--  1   staff  596  8 12 23:12 README.md
-rw-r--r--  1   staff   60  8 12 23:12 app.vue
-rw-r--r--  1   staff  134  8 12 23:12 nuxt.config.ts
-rw-r--r--  1   staff  208  8 12 23:12 package.json
-rw-r--r--  1   staff   88  8 12 23:12 tsconfig.json

生成されたnuxt-appディレクトリでnpm install

$ npm  inatall 
npm WARN deprecated stable@0.1.8: Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility

added 619 packages, and audited 620 packages in 25s

84 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

ローカルサーバー立ち上げ

npm run dev -- -o

自動的にこの画面が立ち上がる。