Vue＋Nuxt学習：#1 サンプルプログラムの実行

環境

VirtualBox上のWindows 10
ホストOS：Windows 10 1909 (18363.959)
ゲストOS：Windows 10 1909 (18363.959)
VirtualBox：6.1.12 r139181

node.js：v12.18.0

サンプルプログラム作成

1) 任意フォルダを作成 (D:\edu\vue)

2) コマンドプロンプトを開き作成したフォルダへ移動
"cd /d d:\edu\vue"

3) 以下コマンドを実行しNuxt.jsプロジェクトを作成
"npx create-nuxt-app test"

質問を聞いてくる

✨  Generating Nuxt.js project in test
? Project name: (test)

→ [Enter]

? Programming language: (Use arrow keys)
> JavaScript
  TypeScript

→ 既定値 "JavaScript" を選択した

? Package manager: (Use arrow keys)
> Yarn
  Npm

→ 既定値 "Yarn" を選択した

? UI framework: (Use arrow keys)
> None
  Ant Design Vue
  Bootstrap Vue
  Buefy
  Bulma
  Element
  Framevuerk
  iView
  Tachyons
  Tailwind CSS
  Vuesax
  Vuetify.js

→ 既定値 "None" を選択した

? Nuxt.js modules: (Press ＜space＞ to select, ＜a＞ to toggle all, ＜i＞ to invert selection)
>( ) Axios
 ( ) Progressive Web App (PWA)
 ( ) Content

→ 何も選択しない

? Linting tools: (Press ＜space＞ to select, ＜a＞ to toggle all, ＜i＞ to invert selection)
>( ) ESLint
 ( ) Prettier
 ( ) Lint staged files
 ( ) StyleLint

→ 何も選択しない

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

→ 既定値 "None" を選択した

? Rendering mode: (Use arrow keys)
> Universal (SSR / SSG)
  Single Page App

→ 既定値 "Universal" を選択した

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

→ 既定値 "Server" を選択した

? Development tools: (Press ＜space＞ to select, ＜a＞ to toggle all, ＜i＞ to invert selection)
>( ) jsconfig.json (Recommended for VS Code)
 ( ) Semantic Pull Requests

→ 何も選択しない

すべて入力したところエラーが発生した

'yarn' �́A�����R�}���h�܂��͊O���R�}���h�A
����”\�ȃv���O�����܂��̓o�b�` �t�@�C���Ƃ��ĔF������Ă��܂���B


- Installing packages with yarnTrace: Error: spawn yarn ENOENT
    at notFoundError (C:\Users\user\AppData\Roaming\npm-cache\_npx\5888\node_modules\create-nuxt-app\node_modules\sao\node_modules\cross-spawn\lib\enoent.js:6:26)
    at verifyENOENT (C:\Users\user\AppData\Roaming\npm-cache\_npx\5888\node_modules\create-nuxt-app\node_modules\sao\node_modules\cross-spawn\lib\enoent.js:40:16)
    at ChildProcess.cp.emit (C:\Users\user\AppData\Roaming\npm-cache\_npx\5888\node_modules\create-nuxt-app\node_modules\sao\node_modules\cross-spawn\lib\enoent.js:27:25)
    at Process.ChildProcess._handle.onexit (internal/child_process.js:275:12) {
  code: 'ENOENT',
  errno: 'ENOENT',
  syscall: 'spawn yarn',
  path: 'yarn',
  spawnargs: [ 'install' ]
}
    at C:\Users\user\AppData\Roaming\npm-cache\_npx\5888\node_modules\create-nuxt-app\lib\cli.js:46:17
    at processTicksAndRejections (internal/process/task_queues.js:97:5)

→ "Package manager"の選択は "Npm" の方が良かったか？
"Npm"を選択しもう一度やってみる

→ 今度は正常終了した

4) 以下コマンドでサンプルプログラムを実行
"cd test"
"npm run dev"
※ このコマンドは"開発用にプロジェクトを実行"の意味

以下入力で止まる

i NuxtJS collects completely anonymous data about usage.                                                      08:49:49
  This will help us improving Nuxt developer experience over the time.
  Read more on https://git.io/nuxt-telemetry

? Are you interested in participation? (Y/n)

→ 匿名でのデータ取集を希望しますか？
"n"を入力した

しばらくすると以下画面で止まる。これで準備完了

i Waiting for file changes                                                                                    08:53:21
i Memory usage: 142 MB (RSS: 223 MB)                                                                          08:53:21
i Listening on: http://localhost:3000/

ブラウザで "http://localhost:3000/" を表示

→ OK

---

学習メモ, Vue.js, Next.js