Vue.js：「Vue.js」入門～JavaScriptフレームワークをTypeScriptで学ぼう #1

以下記事をやってみようとしたが、サンプルの実行方法がパッと浮かばなかったのでメモ
※ 「Vue.js」入門～JavaScriptフレームワークをTypeScriptで学ぼう：CodeZine（コードジン）

環境

Windows 10 21H1 (19043.1288)
この記事でインストールするライブラリ
・Node.js 14.17.0

サンプル実行手順

1. Node.jsインストール

以下の過去blogを参考に Nodist を使ってNode.jsをインストールする。
※ Node.js：Nodistインストール

1. Nodistインストール
2. コマンドプロンプトでNode.js 14.17.0をインストール

nodist + 14.17.0
nodist 14.17.0

実行例：

C:\Users\user>nodist + 14.17.0
14.17.0

C:\Users\user>nodist 14.17.0
14.17.0
14.17.0 (global)

2. サンプルプログラム配置

ダウンロードした VueSample.zip を解凍しC:\Work へ配置

3. ライブラリインストール

コマンドプロンプトを起動、サンプルプログラムのパスに移動したのち
記事の通り "npm install" コマンドでライブラリをインストールする

C:\work\VueSample\p001-vue-basic>npm install
npm WARN npm npm does not support Node.js v14.17.0
npm WARN npm You should probably upgrade to a newer version of node as we
npm WARN npm can't make any promises that npm will work with this version.
npm WARN npm Supported releases of Node.js are the latest release of 6, 8, 9, 10, 11, 12.
npm WARN npm You can find the latest version at https://nodejs.org/
npm ERR! cb.apply is not a function

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\user\AppData\Roaming\npm-cache\_logs\2021-11-10T03_31_51_551Z-debug.log
      

エラーとなってしまった。

npmバージョン不一致が原因らしい。
※ Node.js：cb.apply is not a function

"nodist npm match" コマンドでnpmをインストール

C:\work\VueSample\p001-vue-basic>nodist npm match
npm match
https://codeload.github.com/npm/cli/tar.gz/v6.14.13 [===============] 5655/5834 KiB 96% 0.0s
      

あらためて "npm install" コマンドを実行

C:\work\VueSample\p001-vue-basic>npm install
npm WARN p001-vue-basic@1.0.0 No description
npm WARN p001-vue-basic@1.0.0 No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.3.2 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.3.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

added 194 packages from 252 contributors and audited 195 packages in 23.776s

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

found 9 vulnerabilities (8 moderate, 1 high)
  run `npm audit fix` to fix them, or `npm audit` for details
      

4. サンプル実行

"npm run serve" コマンドで実行
ブラウザが勝手に開いてサンプルが実行される。

動作問題なし

※ 次回記事：Vue.js：「Vue.js」入門～JavaScriptフレームワークをTypeScriptで学ぼう #2

---

学習, Vue.js, TypeScript