以前にVue.jsについて紹介しました。このときはCDNのVue.jsにより始める簡易的な方法でした。しかし大規模プロジェクトになると、多くの要件への対応が必要になり、パッケージを管理する必要がでてきます。そこでVue CLIを利用してVue.jsを始める方法を紹介したいと思います。 しかし一言でVue CLIと言っても、実は2つのバージョンが存在します。それは

• vue-cli … v2.x
• @vue/cli … v3.x

です。同じVue CLIですがバージョンによって表記が異なります。しかし両方ともVue CLIと呼ばれます。v3.x は 2018/8/10 にリリースされ、今ではその情報も増えてきています。そのためVue CLIで検索しても両方の検索結果が表示され大きな混乱が生じています。 そこで今回は v2.x と v3.x のインストール方法から実行・ビルドの方法までを2回に分けて紹介したいと思います。

Vue CLI v2.x

今回はVue CLI v2.xのインストール方法・実行・ビルドの方法を紹介します。Vue CLI v2.x のインストールには npm をしますので、事前にNode.jsをインストールしておいてください。 vue-cli https://www.npmjs.com/package/vue-cli GitHubのvue-cliレポジトリ https://github.com/vuejs/vue-cli/tree/v2#vue-cli–

vue-cli のインストール

それではvue-cliをインストールしましょう。npmを利用してインストールするので1コマンドのみで簡単です。

$ npm install -g vue-cli

vue-cliによりプロジェクト作成

プロジェクトの作成は、vueコマンドを利用します。

$ vue init <template-name> <project-name>

ここで「テンプレート名」と「プロジェクト名」の入力が必要です。「テンプレート名」は次のものがあります。

• webpack
• webpack-simple
• browserify
• browserify-simple
• pwa
• simple

詳細については割愛しますが、何をテンプレートにすればいいかわからない場合は、webpackを選択していれば問題ないでしょう。ここではwebpackを選択してプロジェクトを作成します。

$ vue init webpack my-project

上記コマンドを入力すると、プロジェクトに関して次のようなことが質問されます。

? Project name
? Project description
? Author
? Vue build
? Install vue-router?
? Use ESLint to lint your code?
? Pick an ESLint preset
? Set up unit tests
? Pick a test runner
? Setup e2e tests with Nightwatch?
? Should we run `npm install` for you after the project has been created?

といろいろと聞かれますが、わからなければ全てエンターを押しても問題ありません（今回の範囲を超える内容なので割愛します）。 プロジェクトが作成されると、その中には拡張子vueのものが存在しますが、ここに処理を書いていけばいいでしょう。

Webサーバの起動

npmを利用していますので、Webサーバを起動して簡単に実行することができます。プロジェクトには拡張子vueのものが存在しますが、Webサーバで実行できるの？と思うかもしれないですが、自動でブラウザが読める形式に変換してくれるので問題なく表示することができます。

$ npm run dev

http://localhost:8080 に接続するとVue.jsの画面が表示されるでしょう。

プロジェクトのビルド

拡張子vueのままではWebサーバに配置することができません。そのためプロジェクトをビルドし、ブラウザで読み込むことができるHTML, CSS, JavaScriptのファイルを生成します。そのために次のコマンドを実行します。

$ npm run build

ビルドが終わると dist フォルダにHTML, CSS, JavaScriptファイルが生成されますので、これらをWeb サーバに配置すればいいでしょう。 しかしこれらを配置しても、配置した箇所がサブディレクトリなどであれば見ることができません。そのためローカルPC上でも見ることができません。 なぜならCSSやJavaScriptのパスが絶対パスになっているからです。これを相対パスに変えれば、どこに配置しても正常に見ることができます。 その設定は、下記にあります。修正が必要なのはbuildの項目にあるassetsPublicPathです。この値が’/’になっているので、これを’.’に変更します。 /config/index.js

'use strict'

const path = require('path')

module.exports = {
   :
   :
  build: {
    index: path.resolve(__dirname, '../dist/index.html'),

    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '.',
     :
     :
  }
}

再度ビルドすると、CSSとJavaScriptは相対パスに変わっています。これでどこに配置しても正しく表示することができるようになりました。

まとめ

今回はVue CLI v2.xである vue-cli のインストール方法・実行・ビルドの手順を紹介しました。新しいv3.xがリリースされて暫く経ちますが、まだ情報がまとまっていなかったり、v3.xに対応していないプラグインなども多くv2.xが利用されるケースも少なくありません。まだまだ現役で活躍できるものですので、必要な時に思い返してみてください。