【Vue.js】Vue CLI 3系のインストール方法

Vue.js

今回は”Vue.js”アプリの開発に使用する公式ツール、「Vue CLI」のインストール方法を紹介します。

Vue.jsでは、Vue CLIを使って、プロジェクトの作成やプラグインの追加を行うことが可能です。

この記事で扱うVue CLIのバージョンは、「Vue CLI 3」です。

Vue CLIはバージョン3になって使い方が変わっています。

変更内容の詳細については、公式ドキュメントを参照してください。

https://cli.vuejs.org/
スポンサーリンク

事前準備

「Vue CLI」をインストールするには、Node.jsをインストールしておく必要があります。Node.jsのバージョンは、”8.11.0″以上が推奨されています。

Node.jsをまだインストールしていない方は、インストールの手順をこちらで解説していますので、参照ください。

MacにNode.jsとnpmをインストールする方法【初心者向け】
この記事では、MacにNode.jsとnpmをインストールして、npmコマンドを使えるようにする方法を紹介しています。npmとはnpmは「Node Package Manager」の略称です。その名前の通り、Node.jsのパッケー...

Vue CLIをインストール

Vue CLIは”npm”コマンドを使ってインストールします。

$ npm install -g @vue/cli

Vue CLIのインストール時にパーミッションエラーが発生した場合

上記のコマンドを実行したときに、「npm WARN checkPermissions Missing write access」が発生することがあります。

$ npm install -g @vue/cli

■ エラーが発生したときのメッセージ
================================================
npm WARN checkPermissions Missing write access to /usr/local/lib/node_modules
npm ERR! path /usr/local/lib/node_modules
npm ERR! code EACCES
npm ERR! errno -13
npm ERR! syscall access
npm ERR! Error: EACCES: permission denied, access '/usr/local/lib/node_modules'
npm ERR!  { [Error: EACCES: permission denied, access '/usr/local/lib/node_modules']
npm ERR!   stack:
npm ERR!    'Error: EACCES: permission denied, access \'/usr/local/lib/node_modules\'',
npm ERR!   errno: -13,
npm ERR!   code: 'EACCES',
npm ERR!   syscall: 'access',
npm ERR!   path: '/usr/local/lib/node_modules' }
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 (though this is not recommended).

パーミッションエラーが発生した場合は、次のようにnpmの前に“sudo”を入力してください。

$ sudo npm install -g @vue/cli

■ インストールに成功したときのメッセージ
================================================
/usr/local/bin/vue -> /usr/local/lib/node_modules/@vue/cli/bin/vue.js

> fsevents@1.2.4 install /usr/local/lib/node_modules/@vue/cli/node_modules/fsevents
> node install

[fsevents] Success: "/usr/local/lib/node_modules/@vue/cli/node_modules/fsevents/lib/binding/Release/node-v64-darwin-x64/fse.node" already installed
Pass --update-binary to reinstall or --build-from-source to recompile

> protobufjs@6.8.8 postinstall /usr/local/lib/node_modules/@vue/cli/node_modules/protobufjs
> node scripts/postinstall


> nodemon@1.18.4 postinstall /usr/local/lib/node_modules/@vue/cli/node_modules/nodemon
> node bin/postinstall || exit 0

Love nodemon? You can now support the project via the open collective:
 > https://opencollective.com/nodemon/donate

+ @vue/cli@3.0.4
added 706 packages from 470 contributors in 20.457s

「Vue CLI」のインストールが完了したところで、”vue”コマンドが実行できるかどうか確認しましょう。

$ vue --version
=====================
3.0.4

Vue CLIのインストール方法は以上です。