Vue.jsはじめの一歩（HelloWorldしてみよう）

正月で、Vue.jsを触ってみたので、そのアウトプット第一弾。
Vue.jsでとりあえずHelloWorldしたい人向けの記事です。

できるようになること

・Vue.jsの環境設定
・ローカルサーバでの動作確認

Vue.jsって何よ

ユーザインタフェースに特化した、JavaScriptフレームワーク
導入のしやすさや、学習コストの低さが特徴(初心者にとって嬉しい)
また、公式ドキュメントも日本化されてる。
公式ドキュメント

環境設定

npmが入ってない人

（コマンドラインでnpmと打って、command not foundになる人）
npmというパッケージ管理ツールが必要となります。npmの導入には、 Node.jsのインストールが必要となります。
以下を参考にインストールしてください。
Macユーザ：MacにNode.jsをインストール @kyosuke5_20
Winユーザ：[Node.js] Node.js の導入(Windows編) @ksh-fthr

Vueの環境セットアップ

様々な方法があるようですが、今回は簡単なVue CLIとWebPackを使いました。

Vue CLIのインストール

$ npm install -g vue-cli

作業ディレクトリに移動して（プロジェクトを作りたいところ）
今回はプロジェクト名がtest-vueとなります。

$ vue init webpack test-vue
Project name test-vue
? Project description A Vue.js project
? Author 
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests Yes
? Pick a test runner jest
? Setup e2e tests with Nightwatch? Yes
? Should we run `npm install` for you after the project has been created? (recommended) npm

色々聞かれますが、Enter連打で進めて行ってください。
これで、テンプレートとなるプロジェクトが完成。

ローカルサーバで動作確認

$ cd test-vue
$ npm install 
$ npm run dev

ブラウザ上で、http://localhost:8080/#/ にアクセスすると

HelloWorld完了

次回は、Vueのコンポーネント追加と、ルーティングについてまとめたいと思います。