starMagichat
@starMagichat

Are you sure you want to delete the question?

Leaving a resolved question undeleted may help others!

Vue.jsをインストールしたい(npm ERR!)

Q&A

Closed

解決したいこと

Vue.jsをインストールしたい
現在ウェブアプリを作るためVue.jsをインストールを行いましたが、やってみたら、ERR!が多くうまくできなかったので
正しくインストールする手順を教えていただけると幸いです。

発生している問題・エラー

magic_hat@(私の名前)noMacBook-Air git % npm install -g @vue/cli
npm notice 
npm notice New minor version of npm available! 10.2.4 -> 10.4.0
npm notice Changelog: https://github.com/npm/cli/releases/tag/v10.4.0
npm notice Run npm install -g npm@10.4.0 to update!
npm notice 
npm ERR! code EACCES
npm ERR! syscall mkdir
npm ERR! path /usr/local/lib/node_modules/@vue
npm ERR! errno -13
npm ERR! Error: EACCES: permission denied, mkdir '/usr/local/lib/node_modules/@vue'
npm ERR!  [Error: EACCES: permission denied, mkdir '/usr/local/lib/node_modules/@vue'] {
npm ERR!   errno: -13,
npm ERR!   code: 'EACCES',
npm ERR!   syscall: 'mkdir',
npm ERR!   path: '/usr/local/lib/node_modules/@vue'
npm ERR! }
npm ERR! 
npm ERR! The operation was rejected by your operating system.
npm ERR! It is likely you do not have the permissions to access this file as the current user
npm ERR! 
npm ERR! If you believe this might be a permissions issue, please double-check the
npm ERR! permissions of the file and its containing directories, or try running
npm ERR! the command again as root/Administrator.

npm ERR! A complete log of this run can be found in: /Users/magic_hat/.npm/_logs/2024-02-04T03_31_52_162Z-debug-0.log

使用したコマンド

npm install -g @vue/cli

自分で試したこと

1.まずAIのcopilotに聞いてみました。
AIは
[手前にsudoコマンドをつけてください]
と言いましたが
少し不安なのでもっと質問してみたら、
[sudoコマンドをつけるのは推奨されていません]
と言ってしまい、
何が正しいコマンドなのか私の知識不足で分かりませんでした。

2.googleで調べてみる。
自分なりに色々調べてみたところ
https://qiita.com/wafuwafu13/items/2fe43414aa6e1899f494
から引用すると
ステップ1
$ npm install -g npm

npm自体のアップデートをする。

ステップ2
$ rm -rf node_modules

既存のモジュールを削除する。

ステップ3
$ npm install

プロジェクトの依存関係を再インストールする。
と書いてあったのですが、
まずステップ1を試したところ

magic_hat@(私の名前)noMacBook-Air git % npm install -g npm
npm ERR! code EACCES
npm ERR! syscall rename
npm ERR! path /usr/local/lib/node_modules/npm
npm ERR! dest /usr/local/lib/node_modules/.npm-i9nnxROI
npm ERR! errno -13
npm ERR! Error: EACCES: permission denied, rename '/usr/local/lib/node_modules/npm' -> '/usr/local/lib/node_modules/.npm-i9nnxROI'
npm ERR!  [Error: EACCES: permission denied, rename '/usr/local/lib/node_modules/npm' -> '/usr/local/lib/node_modules/.npm-i9nnxROI'] {
npm ERR!   errno: -13,
npm ERR!   code: 'EACCES',
npm ERR!   syscall: 'rename',
npm ERR!   path: '/usr/local/lib/node_modules/npm',
npm ERR!   dest: '/usr/local/lib/node_modules/.npm-i9nnxROI'
npm ERR! }
npm ERR! 
npm ERR! The operation was rejected by your operating system.
npm ERR! It is likely you do not have the permissions to access this file as the current user
npm ERR! 
npm ERR! If you believe this might be a permissions issue, please double-check the
npm ERR! permissions of the file and its containing directories, or try running
npm ERR! the command again as root/Administrator.

npm ERR! A complete log of this run can be found in: /Users/magic_hat/.npm/_logs/2024-02-04T03_45_14_068Z-debug-0.log

と、なり
ステップ2なのですが
このコマンドをどのディレクトリで実行すればいいのかわかりません。

皆さんのお力添えよろしくお願いいたします。m(_ _)m

0

2Answer

Comments

  1. @starMagichat

    Questioner

    まずはNVMを利用してNode.jsごと新しくインストールしてください
    ということで
    ターミナルにて確認してみたところ

    nvm --version
    
    nvm -v
    

    の両方のコードを試しましたがどちらも

    zsh: command not found: nvm
    

    と出現してしまい、おそらくインストールされていないと考え、

    % curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
    

    を実行しインストールを試みました。
    その結果

    magic_hat@(私の名前)noMacBook-Air git % curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
      % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                     Dload  Upload   Total   Spent    Left  Speed
    100 16555  100 16555    0     0   236k      0 --:--:-- --:--:-- --:--:--  237k
    => Downloading nvm from git to '/Users/magic_hat/.nvm'
    => Cloning into '/Users/magic_hat/.nvm'...
    remote: Enumerating objects: 365, done.
    remote: Counting objects: 100% (365/365), done.
    remote: Compressing objects: 100% (314/314), done.
    remote: Total 365 (delta 43), reused 156 (delta 25), pack-reused 0
    Receiving objects: 100% (365/365), 365.11 KiB | 11.41 MiB/s, done.
    Resolving deltas: 100% (43/43), done.
    * (HEAD detached at FETCH_HEAD)
      master
    => Compressing and cleaning up git repository
    
    => Profile not found. Tried ~/.bashrc, ~/.bash_profile, ~/.zprofile, ~/.zshrc, and ~/.profile.
    => Create one of them and run this script again
       OR
    => Append the following lines to the correct file yourself:
    
    export NVM_DIR="$HOME/.nvm"
    [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
    
    => You currently have modules installed globally with `npm`. These will no
    => longer be linked to the active version of Node when you install a new node
    => with `nvm`; and they may (depending on how you construct your `$PATH`)
    => override the binaries of modules installed with `nvm`:
    
    /usr/local/lib
    ├── corepack@0.23.0
    => If you wish to uninstall them at a later point (or re-install them under your
    => `nvm` Nodes), you can remove them from the system Node as follows:
    
         $ nvm use system
         $ npm uninstall -g a_module
    
    => Close and reopen your terminal to start using nvm or run the following to use it now:
    
    export NVM_DIR="$HOME/.nvm"
    [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
    

    となったのですが

    nvm -v
    

    を使用しても

    zsh: command not found: nvm
    

    となってしまいnvm自体がインストールできていない可能性があるのですが。
    どうすればいいでしょうか?

  2. 対処法はきちんと書いてあるのですから読みましょう.

    => Close and reopen your terminal to start using nvm or run the following to use it now:
    
    export NVM_DIR="$HOME/.nvm"
    [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
    
  3. @starMagichat

    Questioner

    ありがとうございます!
    説明文によると

    ターミナルを閉じて再度開き、nvm の使用を開始する または、

    次を実行して今すぐ使用します。

    export NVM_DIR="$HOME/.nvm"
    [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
    

    ということで

    export NVM_DIR="$HOME/.nvm"
    [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
    

    をターミナルに打ち込むを行なったところ

    nvm -v
    

    を使用し

    0.39.7
    

    と表示され
    正常にダウンロードできました。
    なので今からnode.jsをインストールしなおします

  4. @starMagichat

    Questioner

    今、Vue.jsのプロジェクトをインストールまで完了させることができました。
    何をやればいいか全くわからなかったので、丁寧に教えていただき助かりました。
    本当にありがとうございました。

Your answer might help someone💌