Vue CLIって、なに？

コマンドラインを使ったVue.js開発支援ツール

• 管理はプロジェクト単位
• プロジェクト作成時に、利用したいプラグインやライブラリもプリインストールできる
• webpack入りなのですぐに開発が始められる

※CLIはCommnad Line Interfaceの略

インストール

事前確認

node.jsとnpmは土台として必須なので、入れておきましょう。

入っているか確認

$ node --version
$ npm --version

インストール

$ npm install -g @vue/cli

インストールされたか確認

$ vue --verion

※最新が入るので、2020 4/24時点では 4.3.1

はい、インストールはこれで終わりです。

新規プロジェクト作成

では、とりあえず形だけ、プロジェクトのベースを作ってみましょう。

任意のディレクトリに移動してから、プロジェクト名sample-appで作成してみます。

$ vue create sample-app

そうすると、
デフォルト(babelとかeslintのパッケージ入りの状態)で作るか
マニュアル(一個づつ手動でプラグイン選択)で作るか聞かれます。

> default (babel, eslint)
  Manually select features

今回はマニュアルを選びます。
すると、いろいろ選択できるプラグインが表示されます。

Vue CLI v4.3.1
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 ( ) Router
 ( ) Vuex
 ( ) CSS Pre-processors
 (*) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing

使いたいもの選択してチェック入れてください。

操作方法は、
矢印の↑↓で移動して、該当項目でスペースを押すと選択できます。
終わったらエンターで決定する。

とりあえずCSS Pre-porcessorsは必須でしょう。
Babel、Linterももちろんあっがほうがよいでしょう。
他はやりたいことに応じて。

この後は選択したプラグインについていろいろ聞かれますので、うまいことやってみください。

そして最後に、
「今後のためにも、今回の設定を保存するかい？」って聞かれます。

? Save this as a preset for future projects?

同じ設定でプロジェクトを何度も作る機会があるなら便利ってことですかね。
とりあえず、noって意味で、何も入力せずエンターします。

これでプロジェクト作成プログラムがガーっと走り出します。
しばらく待ちましょう。

ピタッと動きが止まり、以下のテキストが表示されたら無事作成完了です。

...
🎉  Successfully created project sample-app.
👉  Get started with the following commands:

 $ cd sample-app
 $ npm run serve

ラストの二行で、
「プロジェクトディレクトリに移動して、内臓サーバ起動して確認してみな？」って、有言の圧力をかけられます。

ここまでで設定は完了しました。

おいそれと確認

プロジェクトディレクトリに移動してから、内臓サーバを起動させます。

$ npm run serve

ブラウザでアクセスしてみる。
http://localhost:8080/

こんなページが表示されていればひとまずOKです。
これはプロジェクト作成時にあらかじめ自動で用意されるデフォルトページですが、
ここからオリジナルのページ作成へと入っていき開発がスタートします。

まずはこれで入り口に立つことができました。
お疲れ様でした。

【公式】Vue CLI
https://cli.vuejs.org/