Works by

Ren's blog

アプリケーションバックエンド中心に書いていきます

【Vue.js】vue-cliでVueプロジェクトを作成する

f:id:rennnosukesann:20181217223208p:plain:w300

Vue.jsとは

Vue.jsとは、近年急激に普及しつつある軽量フロントエンドフレームワークです。ReactのVirtual DOMやAngularの双方向バインディングといったメジャーなフレームワークが実装する強力な機能を備えつつ、学習コストが抑えめであるという特徴を持ちます。またAngularのようなフルスタックなフレームワークとは異なり、基本的なView-Controller以外のロジック実装については外部ライブラリを適宜追加して行います。例えばRouterや状態管理アーキテクチャなどは vue-routervuex などを使用します。このへんは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

rennnosukesann.hatenablog.com

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

最初はこのようなプリセット選択画面が出ます。 このプリセットとはプロジェクト作成における設定情報のことです。 以降、プロジェクトに導入したいツールの設定を行うのですが、一度行った設定はプリセットとして保存し、次回のプロジェクト作成にも適用することができます。

f:id:rennnosukesann:20181217224359p:plain

今回は初めてなので、「Manually select features 」をカーソルで選択してEnterを押します。

次に下記のような画面が出てくるので、導入したいツール・ライブラリをクリック。今回は全部入れていきます!

f:id:rennnosukesann:20181217224257p:plain

f:id:rennnosukesann:20181217224820p:plain

下記の調子でどんどんツールを追加していきます。 最後の項目で「yes」と答えると、プリセットとして保存されます。

f:id:rennnosukesann:20181217224841p:plain

あとはEnterを押すと、プロジェクト作成が開始されます!

作成されたプロジェクトディレクトリ上で npm run serve (yarnの場合は yarn serve )を実行すると、アプリをローカル上にデプロイすることができます!

$ cd my-app

$ npm run serve
$ cd my-app

$ yarn serve

f:id:rennnosukesann:20181217225209p:plain

無事アプリが立ち上がりました! とても簡単ですね!

参考文献

cli.vuejs.org