vuejsの開発環境を構築する

vuejs2.0の開発環境を構築する手順を紹介します。

vueという空のフォルダを新規に作成し、このフォルダをプロジェクトフォルダとします。

package.jsonの作成

最初にnodejs(javascript)のパッケージ管理をするためにpackage.jsonというファイルを作成します。以下の内容でpackage.jsonのファイルを先ほど作成したvueフォルダ直下に作成します。

package.json

{
  "private": true
}

このファイルでvueやvuexやその他いろいろなパッケージを管理します。

通常はnpm initのコマンドでファイルを作成するのですが、いろいろと細かい設定項目があるため、逆にわかりづらくなってしまいそうなので、今回は手動で作成し、設定項目も"private": trueのみ設定しました。

vueのインストール

コマンドで先ほど作成したvueのフォルダに移動（カレントフォルダにセット）して、以下のコマンドを実行します。

npm install vue --save-dev

コマンド実行後、package.jsonと同じフォルダにnode_modulesのフォルダが作成されたと思います。また、package.jsonは以下のようになったと思います。

package.json

{
  "private": true,
  "devDependencies": {
    "vue": "^2.0.5"
  }
}

これは先程のコマンドで--save-devというオプションをつけたためです。このpackage.jsonのファイルを別のPCにコピーして、npm installのコマンドを実行すると全く同じ環境を作成することができるので、パッケージをインストールするときは--save-devのオプションをつけるのをおすすめします。

コードの実装

最初に、vueフォルダの直下に新しくindex.htmlのファイルを作成します。ファイルの内容は以下のようにします。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>vueで作るWEBアプリ</title>
</head>
<body>
  <div id="app">
  </div>
  <script src="js/app.js"></script>
</body>
</html>

js/app.jsを読み込むように設定します。実際はapp.jsにコードを実装するのではなく、別の複数のファイルで実装したコードをビルドしてapp.jsを作成するという流れになります。

次に、vueフォルダの直下に新しくassetsのフォルダを作成します。このフォルダの中でvueのコードを実装していくことになります。

assetsフォルダ直下にapp.jsファイルを作成します。ファイルの内容は以下のようにします。

import Vue from 'vue';
import 'babel-polyfill';
import App from './components/App.vue';

new Vue({
  el: '#app',
  render: h => h(App)
});

importで指定しているbabel-polyfillは古いブラウザに対応するために必要なのでインストールします。

npm install babel-polyfill --save-dev

次にimportするApp.vueを作成します。componentsフォルダを作成し、その中にいろいろなvueファイルを作成していくことになります。

vueファイルの詳しい実装方法については別途紹介します。

<template>
  <div class="root">
    Hellow world
  </div>
</template>

<style scoped>
.root {
  background-color: red;
}
</style>

<script>
export default {
};
</script>

ビルドツールの導入

assetsフォルダで実装したコードをブラウザが認識できるように変換してjs/app.jsに出力するビルド処理を実装します。

gulp

ビルドツールにはいろいろありますが、今回はgulpを使います。以下のコマンドでgulpをインストールします。

npm install gulp --save-dev

gulpfile.bable.jsというファイルをルートフォルダ（package.jsonのファイルと同じ場所）に作成します。ファイルの内容は以下のようにします。

import gulp from 'gulp';
import source from 'vinyl-source-stream';
import buffer from 'vinyl-buffer';
import browserify from 'browserify';
import babelify from 'babelify';
import vueify from 'vueify';

gulp.task('build', [], () => {
  browserify('./assets/app.js')
  .transform(babelify, { presets: ['es2015'] })
  .transform(vueify)
  .bundle()
  .pipe(source('app.js'))
  .pipe(buffer())
  .pipe(gulp.dest('./js'));
});

ES6で記述するために、gulp.jsではなくgulp.bable.jsでファイル名を作成します。 importで指定しているパッケージはビルドするのに必要なので全てインストールします。

npm install vinyl-source-stream --save-dev
npm install vinyl-buffer --save-dev
npm install browserify --save-dev
npm install babelify --save-dev
npm install vueify --save-dev

babel

gulpでのビルドの際に、ES6で実装されたコードをブラウザが認識できる従来のjavascriptに変換する必要があります。以下のパッケージをインストールします。

npm install babel-core --save-dev
npm install babel-preset-es2015 --save-dev

gulp.bable.jsファイルと同じ場所に.babelrcというファイルを作成します。ファイルの内容は以下のようにします。

.babelrc

{
  "presets": ["es2015"]
}

gulp buildのコマンドを実行するとjs/app.jsファイルが作成されます。

ここまでの手順でpackage.jsonは以下のようになっていると思います。

package.json

{
  "private": true,
  "devDependencies": {
    "babel-core": "^6.18.2",
    "babel-polyfill": "^6.16.0",
    "babel-preset-es2015": "^6.18.0",
    "babelify": "^7.3.0",
    "browserify": "^13.1.1",
    "gulp": "^3.9.1",
    "vinyl-buffer": "^1.0.0",
    "vinyl-source-stream": "^1.1.0",
    "vue": "^2.0.5",
    "vueify": "^9.3.0"
  }
}

ブラウザでindex.htmlにアクセスすると赤い背景にhello worldと表示されて表示されれば無事にビルド環境が作成されたことを確認できます。

watchifyとgulpで自動コンパイルと差分更新をおこなうはファイルを監視して自動でビルドしたり、ブラウザを自動更新して、より開発環境を便利にしていきます。