Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
1
Help us understand the problem. What is going on with this article?
@okada3333

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

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

1
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
1
Help us understand the problem. What is going on with this article?