LoginSignup
0
1

More than 3 years have passed since last update.

Vue CLIでプロジェクト作成をしたらErrorになったときのこと

Posted at

Vue CLIでプロジェクト作成をしたらErrorになったので、その時の履歴です。
原因はnpmが古すぎて入れられないpackageがあったようです。

Vue CLIでプロジェクト作成

まずはvue/cliをインストール

$ npm install -g @vue/cli

プロジェクトを作成します。ここではchatという名前にしました。

$ vue create chat

オプションは以下を選択

❯ Default (Vue 3 Preview) ([Vue 3] babel, eslint) 
❯ Use NPM 

ほかは聞かれなかった気がする :thinking:
(選ぶものによるのかな)

プロジェクトができたらディレクトリに移動して起動

 $ cd chat
 $ npm run serve

ここでエラーが出ました

 ERROR  Error: Cannot find module 'vue-loader-v16/package.json'

ログを確認

ログを確認すると、警告が出てました。
npmが古いらしい

WARN  You are using an outdated version of NPM.
there may be unexpected errors during installation.
Please upgrade your NPM version.

バージョンを確認。
確かに古い…

$ npm -v
6.4.1
$ node -v
v10.15.3

Nodeのバージョンを変える

Nodeのバージョンを上げるとnpmのバージョンも上がるので、Nodeのバージョンをあげます。

私はnodenvを使っているので、nodenvでバージョンを変えます。

$ nodenv versions
  system
* 10.15.3 (set by /Users/okada/.nodenv/version)
  12.19.0
  14.16.0
$ nodenv local 14.16.0

バージョンが変わったことを確認

$ nodenv versions
  system
  10.15.3
  12.19.0
* 14.16.0 (set by /Users/okada/project/chat/.node-version)
$ node -v
v14.16.0
$ npm -v
6.14.11

生成された.node-versionはコミットしておきます。
(あとでどのバージョンで作ったかわかるように)

もう一度インストール

もう一度インストールしてから起動

$ npm i
$ npm run serve

立ち上がりました :clap:
image.png
image.png

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1