【Vue.js】vue-cliでVueプロジェクトを作成する
Vue.jsとは
Vue.jsとは、近年急激に普及しつつある軽量フロントエンドフレームワークです。ReactのVirtual DOMやAngularの双方向バインディングといったメジャーなフレームワークが実装する強力な機能を備えつつ、学習コストが抑えめであるという特徴を持ちます。またAngularのようなフルスタックなフレームワークとは異なり、基本的なView-Controller以外のロジック実装については外部ライブラリを適宜追加して行います。例えばRouterや状態管理アーキテクチャなどは vue-router や vuex などを使用します。このへんはReactに近いですね。
Vue-CLI
CLIツールは今やフロントエンドのプロジェクト立ち上げに無くてはならない物になってきており、各フレームワークがそれぞれのCLIツールを提供しています。Vue.jsも例外ではなく、 Vue-CLIと呼ばれる協力なCLIツールが存在します。
CLIツールを使うことで、フレームワークに特化したプロジェクトの雛形を自動生成してくれます。生成されたプロジェクトはWebpackやgulpなどのWebツールが導入済みの状態であり、すぐにアプリの開発を行うことができます。アプリのボイラープレートもあるので、初心者でも開発に取り組みやすくなっています。
プロジェクトのボイラープレートを生成してくれるツールとしてYOMANがありますが、上記CLIツールはそれを各フレームワークに特化させたものとも言えます。
Hello, Vue-CLI！
それでは、実際にVueプロジェクトを作成してみましょう！ プロジェクトを作るだけなら本当に簡単です。
実行環境はMac OS X Mojaveを想定します。
npm or yarnをインストール
もじ npm をインストールしていない方がいたら、まずはじめにインストールしてください。
$ brew install npm
お好みで、 yarn でも構いません（推奨）。
$ npm install yarn
vue-cliをインストール
次に、npm or yarn を使って vue-cli をインストールします。
$ npm install -g @vue/cli
$ yarn global add @vue/cli
vue-cli でプロジェクトを作成する
下記コマンドでプロジェクトを作成します。
my-app には任意のプロジェクト名を入力します。
$ vue create my-app
最初はこのようなプリセット選択画面が出ます。 このプリセットとはプロジェクト作成における設定情報のことです。 以降、プロジェクトに導入したいツールの設定を行うのですが、一度行った設定はプリセットとして保存し、次回のプロジェクト作成にも適用することができます。
今回は初めてなので、「Manually select features 」をカーソルで選択してEnterを押します。
次に下記のような画面が出てくるので、導入したいツール・ライブラリをクリック。今回は全部入れていきます！
下記の調子でどんどんツールを追加していきます。 最後の項目で「yes」と答えると、プリセットとして保存されます。
あとはEnterを押すと、プロジェクト作成が開始されます！
作成されたプロジェクトディレクトリ上で npm run serve (yarnの場合は yarn serve )を実行すると、アプリをローカル上にデプロイすることができます！
$ cd my-app $ npm run serve
$ cd my-app $ yarn serve
無事アプリが立ち上がりました！ とても簡単ですね！
