# Vue CLIでVue.jsの開発環境をセットアップするまでの流れ

URL: https://webrandum.net/vue-cli/
公開日: 2020-08-14
更新日: 2020-08-14
カテゴリー: コーディング
タグ: Vue CLI, Vue.js
出典: Webrandum（著者: サイトウ マサカズ）

今回はVue CLIを使って、Vue.jsの開発環境を作るまでの手順をメモしておきます。

## Vue CLIはVue.jsの開発環境を作ってくれる公式のコマンドラインツール

[Vue CLI](https://cli.vuejs.org)

Vue CLIはVue.jsでアプリケーションを構築するときに、必要となるツールを簡単にセットアップしてくれる公式のコマンドラインツールです。

これを使うことで、1から自分でインストールして回る必要がなくなり、プロジェクトの作成が簡単にできます。

## Vue CLIとYarnのグローバルインストール

まずは必要となる「Vue CLI」のインストールと「Yarn（インストールしていない人）」をインストールします。

[Yarn](https://webrandum.net/yarn/)に関しては過去に記事にしているので、詳細はそちらをご覧ください。

npmよりも高速なパッケージマネージャーだと考えてもらえればOKです。

[JavaScriptパッケージマネージャーをnpmからYarnへ移行しました](https://webrandum.net/yarn)

YarnはなくてもVue CLIは使えますが、一度に大量のパッケージをインストールすることになるので、npmよりも軽いYarnを使うのがオススメです。

下記のコマンドでYarnをインストールします。

```
$ npm install -g yarn
```

つぎに下記コマンドでVue CLIをインストールします（せっかくなのでYarnコマンドでインストール）。

```
$ yarn global add @vue/cli
```

## Vue CLIでプロジェクトの作成

次にVue CLIでプロジェクトの作成をします。

先ほどVue CLIをインストールしたので、Vue CLIのコマンドが使えるようになっているはずです。

下記のコマンドでプロジェクトの作成ができます。

```
$ vue create プロジェクト名
```

今回はプロジェクト名は「sample-project」にして、`vue create sample-project`で実行します。

### プロジェクトの設定

コマンドを実行すると下記のような画面が表示されます。

![プリセットの選択](https://webrandum.net/mskz/wp-content/uploads/2020/08/image_1-8.png)

これは、最初にVue CLIのプリセットを選択する画面で、いくつかデフォルトで入っていますが、今回はすべて自分で選択できる「manually」を選択します。

（上下矢印キーで移動、enterで確定）

すると、使用する機能を選択する画面になります。

使用したい機能を矢印キーで選択して、spaceで使用するかどうかの切り替えをして、すべて選択し終えたらenterで次のステップへ進みます。

![機能の選択](https://webrandum.net/mskz/wp-content/uploads/2020/08/image_2-8.png)

| 機能名 | 内容 |
| --- | --- |

| Choose Vue version | Vue.jsのバージョンを指定する（指定しない場合は最新） |
| --- | --- |

| Babel | JavaScriptのES6をES5にしてくれるコンパイラのBabelを使用する |
| --- | --- |

| TypeScript | TypeScriptを使用する |
| --- | --- |

| Progressive Web App (PWA) Support | PWAのサポートをする |
| --- | --- |

| Router | ルーティングを制御するためのVue Routerを使用する |
| --- | --- |

| Vuex | Vue.jsの状態管理パターンのライブラリであるVuexを使用する |
| --- | --- |

| CSS Pre-processors | SassやStylusなどのCSSプリプロセッサーを使用する |
| --- | --- |

| Linter / Formatter | コードの記述ルールを統一するLinterやFormatterを使用する |
| --- | --- |

| Unit Testing | ユニットテストを使用する |
| --- | --- |

| E2E Testing | E2E（End to End）テストを使用する |
| --- | --- |

あとは選択した機能に合わせてそれぞれ細かい内容を聞かれるので、それぞれ選択して答えていきます。

最終てきに「Save this as a preset for future projects?（今後のためにこの設定をプリセットとして保存する？）」と聞かれるので、保存しておきたい場合は「y」を入力してenterしてプリセット名を決めて保存できます。

次回以降は最初のプリセット画面に、保存したプリセット名が表示されるので、それを選択すれば今回の設定が全て適用されてプロジェクトが作成されます。

![プリセットの保存をする](https://webrandum.net/mskz/wp-content/uploads/2020/08/image_3-7.png)

保存が不要な場合は「n」を入力してenterします。

必要なパッケージがインストールされるので、完了されるので待ちます。

![パッケージインストール](https://webrandum.net/mskz/wp-content/uploads/2020/08/image_4-3.png)

下記の画面になれば、インストール完了です。

![インストール完了](https://webrandum.net/mskz/wp-content/uploads/2020/08/image_5-3.png)

## プロジェクトの起動

プロジェクトフォルダが作成されているので、`cd`コマンドで下の階層のプロジェクトへ移動して、`yarn serve`でプロジェクトを起動します。

```
$ cd プロジェクト名
$ yarn serve
```

URLが表示されるので、そのURLへアクセス（ターミナル上をcommand + クリックでURLを開けます）すればページが表示されるはずです。

![URLの表示](https://webrandum.net/mskz/wp-content/uploads/2020/08/image_6-2.png)

これで開発環境のセットアップは完了です。

停止したい場合はcontrol + Cで停止できます。