Vue.jsプロジェクト開発を始める準備

# はじめに
前回、[Vue.js開発環境構築記録](https://qiita.com/e-onm/items/688d9393e258c700472d)という記事を書きました。
こちらでは`vue-cli`をインストールするまでを目標としました。
今回はその続きです。実際にプロジェクトの開発環境が整うまでの手順を記録します。

# 目標
プロジェクトを一つ作成してブラウザで実行できたことを確認する。

# やったこと

## IDEの用意
何を使うのか迷いましたが Visual Studio Code をインストールしてみることにしました。
理由としては

- Azure DevOps を使える環境であるため
- 前の現場で少しだけ触ったがまだ慣れてはいないため
- 各所でオススメされているため

などの理由で決めました。

[ダウンロードページ](https://code.visualstudio.com/download)からMac用を入手。
ダウンロードフォルダに Visual Studio Code.app が保存されて、それをクリックするだけでIDEが立ち上がりました。


## プロジェクトの初期化
公式サイトにvue-cliのはじめ方が乗っていました。https://jp.vuejs.org/2015/12/28/vue-cli/

>使用方法は次のようになります:
npm install -g vue-cli
vue init webpack my-project
プロンプトへ回答
cd my-project
npm install
npm run dev # ドジャーン!

すごく簡単そうに見えます。
この手順に沿ってやってみます。

### npm install -g vue-cli
これは前回の記事を書いたときに実施済みです。

### vue init webpack my-project
自分のworkspace内で実行します。

```
$ vue init webpack my-project

  Command vue init requires a global addon to be installed.
  Please run npm install -g @vue/cli-init and try again.
```
言われるがまま

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

npm WARN deprecated vue-cli@2.9.6: This package has been deprecated in favour of @vue/cli
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated coffee-script@1.12.7: CoffeeScript on NPM has moved to "coffeescript" (no hyphen)
+ @vue/cli-init@4.4.6
added 253 packages from 207 contributors in 15.257s
```
もう一回

```
$ vue init webpack my-project
```

### プロンプトへ回答
上のコマンドを実行するとプロンプトでプロジェクトの設定方法を問われます。
回答形式はいくつかありました。

- (Y / n)を押して選択
- 矢印キーで選択してEnter

```
? Project name my-project
? Project description A Vue.js project
? Author 
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests Yes
? Pick a test runner jest
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) npm
```

質問が終わるとプロジェクトの作成が始まります。
終了すると、`実行ディレクトリ/プロジェクト名`配下にファイルが作成されました。
![スクリーンショット 2020-07-03 16.06.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/395809/54926ec9-a37f-9b34-af8a-82620789e1d5.png)


### cd my-project

```
cd my-project
```

### npm install

```
npm install

audited 1744 packages in 10.551s

29 packages are looking for funding
  run `npm fund` for details

found 580 vulnerabilities (566 low, 9 moderate, 5 high)
  run `npm audit fix` to fix them, or `npm audit` for details
```

### npm run dev

```
$ npm run dev

 DONE  Compiled successfully in 6781ms                                                                                              16:13:48

 I  Your application is running here: http://localhost:8080
```

できました:thumbsup:
![スクリーンショット 2020-07-03 16.14.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/395809/5eb226dd-20c4-4f37-feae-85465e7e1a95.png)

停止する場合は `Control + c`


## Visual Studio Code で開いてみる
Welcome pageのOpen folderから先ほどinitしたフォルダを選択します。
![スクリーンショット 2020-07-03 16.47.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/395809/5706e8e3-3f6d-291d-8733-1263dfc9cd4b.png)


# さいごに
開発を始める準備がようやく整いました。
ここから実際にソースを触るのはまた別の記事に残します。

# 助けてもらったサイト
- [【2018年版】vue.jsをmacに入れて動かすまでやってみた](https://qiita.com/Alex_mht_code/items/a05b1b62322b5eff4aa8)