HTML5テクニカルノート

Vue CLI 3入門 02: インストールする

Vue CLIは、2018年7月29日にv3.0.0-rc.9が公開されました。バージョンが3に改められたことにともない、公式サイトの解説にも少し手が加えられたようです。本稿は「Installation」をもとに、Vue CLIのインストールの仕方についてご説明します。

01 Node.jsをインストールする

Vue CLIを使うには「npm」(Node Package Manager)がインストールされていなければなりません。npmはNode.jsに含まれているツールです。まだ入れていなければ、先にNode.jsをインストールしてください。本稿執筆時はバージョン10.7.0が最新です。もうひとつの8.11.3には「LTS」(Long-term Support)と添えられていて、多くのユーザーはこちらを使うことが勧められています(図001)。後者が安定版ということです。

ダウンロードしたインストーラで、Node.jsとnpmがインストールできます。基本的に設定はデフォルトで構いません。

図001■Node.jsサイト

npmもVue CLIもコマンドラインツールにコマンドを打ち込んで使います。macOSならユーティリティのターミナル、WindowsならコマンドプロンプトかNode.jsとともにインストールされるNode.js command promptです。コマンドラインツールを起ち上げてつぎのように入力したときに、インストールしたNode.jsのバージョンが示されれば問題ありません。

node --version

v8.11.3

02 Vue CLIをインストールする

つぎに、Vue CLIのインストールです。v3からパッケージ名が、これまでのvue-cliから@vue/cliに変わりました。

Vue CLIはnpmのInstallコマンドをつぎのよう入力してインストールします。オプション-gはグローバルモードです。そのマシンのどのプロジェクトからでもVue CLIが使えるようになります。

npm install -g @vue/cli

macOSで管理者権限が求められたときは、つぎのようにsudoコマンドを添えてインストールし直してください。

sudo npm install -g @vue/cli

インストールが済めば、vueバイナリがコマンドラインで使えます。正しくインストールできたかどうかは、vueと打ち込んでお確かめください。ヘルプメッセージがコマンドのリストを表示します。

vue

  Usage: vue <command> [options]

  Options:

    -V, --version                         output the version number
    -h, --help                            output usage information

  Commands:

    create [options] <app-name>           create a new project powered by vue-cli-service
    add <plugin> [pluginOptions]          install a plugin and invoke its generator in an already created project
    invoke <plugin> [pluginOptions]       invoke the generator of a plugin in an already created project
    inspect [options] [paths...]          inspect the webpack config in a project with vue-cli-service
    serve [options] [entry]               serve a .js or .vue file in development mode with zero config
    build [options] [entry]               build a .js or .vue file in production mode with zero config
    ui [options]                          start and open the vue-cli ui
    init [options] <template> <app-name>  generate a project from a remote template (legacy API, requires @vue/cli-init)

  Run vue <command> --help for detailed usage of given command.

Vue CLIのバージョンを確かめたいときには、ヘルプメッセージに示されたとおり、オプション--versionを添えて打ち込みます。ただし、省略記法はなぜか大文字-Vですので気をつけましょう。

vue --version
3.0.0-rc.9

Vue CLI 3入門

• Vue CLI 3入門 01: Vue CLIとは
• Vue CLI 3入門 02: インストールする
• Vue CLI 3入門 03: プロトタイプを簡単につくる
• Vue CLI 3入門 04: プロジェクトをつくる
• Vue CLI 3入門 05: プラグインとプリセット
• Vue CLI 3入門 06: CLIサービス

---

作成者: 野中文雄
更新日: 2018年7月29日 本文の若干の修正。
作成日: 2018年7月16日

---

Copyright © 2001-2018 Fumio Nonaka.  All rights reserved.