Vue CLIのインストール〜プロジェクトの作成

# はじめに
Vue CLIのインストール〜プロジェクトの作成手順を記載します。

# 環境
Mac OS

# Node.js（npm）のインストール
まずは、Node.jsとNodebrewをインストールしていきます。

Vue CLIのインストールには、npm（Node Package Manager）が必要です。
npmとは、Node.jsのパッケージ管理ツールで、Node.jsをインストールするとこでnpmも一緒にインストールされます。

Nodebrewは、Node.jsのバージョン管理ツールです。

https://nodejs.org/ja/

- Nodebrewのインストール

```
$ brew install nodebrew
```

- インストール確認

```
$ nodebrew --version

nodebrew 1.0.1

Usage:
    nodebrew help                         Show this message
    nodebrew install <version>            Download and install <version> (from binary)
    nodebrew compile <version>            Download and install <version> (from source)
    nodebrew install-binary <version>     Alias of `install` (For backword compatibility)
    nodebrew uninstall <version>          Uninstall <version>
    nodebrew use <version>                Use <version>
    nodebrew list                         List installed versions
    nodebrew ls                           Alias for `list`
    nodebrew ls-remote                    List remote versions
    nodebrew ls-all                       List remote and installed versions
    nodebrew alias <key> <value>          Set alias
    nodebrew unalias <key>                Remove alias
    nodebrew clean <version> | all        Remove source file
    nodebrew selfupdate                   Update nodebrew
    nodebrew migrate-package <version>    Install global NPM packages contained in <version> to current version
    nodebrew exec <version> -- <command>  Execute <command> using specified <version>

Example:
    # install
    nodebrew install v8.9.4

    # use a specific version number
    nodebrew use v8.9.4
```

- Nodebrewで、Node.jsのインストール可能バージョン一覧を確認

```
$ nodebrew ls-remote
```

- 上記コマンドで表示されるバージョンを指定してインストールする場合

```
$ nodebrew install-binary v16.14.0
```

- 安定版をインストールする場合

```
$ nodebrew install-binary stable
```

- 最新版をインストールする場合

```
$ nodebrew install-binary latest
```

- Nodebrewで、使用する　Node.jsのバージョンを有効化

```
$ nodebrew use v16.14.0
```

- 有効化されているNode.jsのバージョンを確認（currentに設定されているバージョン）

```
$ nodebrew ls
v14.15.1
v16.14.0

current: v16.14.0
```

- npmのバージョン確認

```
$ npm --version
```

# Vue CLIのインストール
Node.js（npm）のインストールが完了したら、Vue CLIをインストールしていきます。

- Vue CLIのインストール

```
$ npm install -g @vue/cli
```

- バージョンが確認できればインストール完了

```
$ vue --version

@vue/cli 5.0.1
```

# プロジェクトの作成
`vue create` を実行すると、対話形式で設定が始まります。

- プロジェクトの新規作成

```
$ vue create sample-project
```

- マニュアルでの設定を選択

```
Vue CLI v5.0.1
? Please pick a preset: 
  Default ([Vue 3] babel, eslint) 
  Default ([Vue 2] babel, eslint) 
❯ Manually select features 
```

- プロジェクトに必要な項目を選択

（未選択の項目については、プロジェクト作成後でも `vue add` コマンドで追加可能です）

```
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert
 selection, and <enter> to proceed)
❯◉ Babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◉ Router
 ◉ Vuex
 ◯ CSS Pre-processors
 ◉ Linter / Formatter
 ◉ Unit Testing
 ◯ E2E Testing
```

- Vue.jsのバージョンを選択

```
? Choose a version of Vue.js that you want to start the project with (Use arrow keys)
❯ 3.x 
  2.x 
```

- Vue Routerでhistoryモードを使用するか選択

```
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) 
```

※Vue Routerとは
SPA構築において、ルーティング制御用のVue.js公式プラグインです。

https://router.vuejs.org/

※historyモードについて

https://frankies1.gitbooks.io/vue-r-pdf/content/ja/essentials/history-mode.html

- linterの設定

```
? Pick a linter / formatter config: (Use arrow keys)
❯ ESLint with error prevention only 
  ESLint + Airbnb config 
  ESLint + Standard config 
  ESLint + Prettier
```
```
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection, a
nd <enter> to proceed)
❯◉ Lint on save
 ◯ Lint and fix on commit
```

- ユニットテストのフレームワークを選択

```
? Pick a unit testing solution: (Use arrow keys)
❯ Jest 
  Mocha + Chai 
```

- 各種設定をpackage.jsonで管理するか、個別ファイルで管理するか選択

```
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
❯ In dedicated config files 
  In package.json 
```

- 今回の設定内容を保存するか選択

```
? Save this as a preset for future projects? (y/N) 
```

- プロジェクト作成完了

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

 $ cd sample-project
 $ npm run serve
```

作成したプロジェクトのディレクトリで `npm run serve` を実行し、
ブラウザで `http://localhost:8080/` にアクセスすると、以下のWelcome画面の表示を確認できます。

![スクリーンショット 2022-02-23 20.48.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/917499/b163c2a0-ba70-9095-bbf1-0911119128af.png)