【Vue.js】ローカル環境構築(Vue CLI v3.10.0)インストール手順


開発環境
🌟Mac OS Mojave


CodePenやJSFiddleでCDN（インターネット経由）でも開発できますが、
ローカル環境での構築手順をまとめます。

Vue.jsの公式サイト
http://vuejs.org/
↑英語

Vue.jsの公式　日本語訳されたサイト
http://jp.vuejs.org/
↑日本語

【Vue.js】Vuejsをchromeブラウザでデバッグする方法
https://qiita.com/nonkapibara/items/8b587013b6b817d6dfc4


1.nodebrewをインストールする

```
brew install nodebrew
```

下記エラーが出た。＞＜
xcrun: error: active developer path ("/Applications/Xcode.app/Contents/Developer") does not exist
Use `sudo xcode-select --switch path/to/Xcode.app` to specify the Xcode that you wish to use for command line developer tools, or use `xcode-select --install` to install the standalone command line developer tools.
See `man xcode-select` for more details.
Error: An exception occurred within a child process:
  CompilerSelectionError: nodebrew cannot be built with any available compilers.
Install GNU's GCC:
  brew install gcc

![001.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/25d115b8-c2b2-4133-79fb-dda0e2361da7.png)

エラー内容を見ると、CLTをインストールしたら良いっぽいので、
CLTをインストールする

```
  brew install gcc
```

CLTをインストールできたので
再度、Nodebrewをインストールする

```
brew install nodebrew
```
インストール確認をする

```
nodebrew -v
```

インストール成功
nodebrew 1.0.1

![002.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/07d8ec17-929f-e923-3b80-fe5f289f1d27.png)

2.Node.jsをインストールする

nodebrew/src のディレクトリを作る

```
mkdir -p ~/.nodebrew/src
```

Node.jsをインストールする

```
nodebrew install-binary latest
```

Installed successfully
が表示され、インストール成功

バージョンを確認する

```
nodebrew ls
```

v12.8.0
が表示される

使用するバージョンを指定する。
```
nodebrew use v12.8.0
```

３.パスを通す

bash_profileを開いて


```
vi ~/.bash_profile
```

以下の内容を追加する

```
export PATH=$HOME/.nodebrew/current/bin:$PATH
```

vimで書き込みを行うときは、iを押します。
一番下の行に-- INSERT --と出て、入力モードになります。
書き込みが済んだら、escを押して入力モードを解除します。

この状態で、:wqと打つと保存してvimを終了してくれます。
（保存しないで終了したい場合は:q）

確認する

```
cat ~/.bash_profile
```

4.設定ファイルを読み直す。

```
exec $SHELL -l
```

5.ここまでの確認をする

```
node -v
```

v12.8.0
が表示されたOK

```
pm -v
```

6.10.2
が表示されたOK


6.Vue CLI3のインストールする

インタラクティブなプロジェクトのひな型作成 - @vue/cli
設定なしに即使えるプロトタイプ作成 - @vue/cli + @vue/cli-service-global

```
npm install -g @vue/cli
npm install -g @vue/cli-service-global

```
バージョンの確認

```
vue --version
```

3.10.0
が表示されOK

7.Vue.js Devtoolsをインストール
Vue.js Devtoolsは、Vue.jsの開発をサポートする Chromeブラウザの拡張機能

Vue.js devtools
https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd

![003.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/0492ce33-c42f-4e33-38c8-37a37c97db8c.png)


8.新しいプロジェクトを作成する

```
vue create testone-app
```

下記表示がされた
?  Your connection to the default npm registry seems to be slow.
   Use https://registry.npm.taobao.org for faster installation? Yes
![004.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/74b13572-e481-5cb4-cea8-e1bb0a78d650.png)

翻訳すると、デフォルトのnpmレジストリへの接続が遅いようです。
とりあえずYでEnter

下記表示がされた
Vue CLI v3.10.0
? Please pick a preset: default (babel, eslint)

![005.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/b420cc89-6d1d-d14a-94f1-7741b129686b.png)
とりあえずEnter

これで、プロジェクトの作成完了
![006.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/0377849a-3f81-4d1c-6ba2-7f1a06a269b8.png)



9.アプリケーションの起動

```
cd testone-app
```

サーバー起動

```
npm run serve
```

下記が表示された
 DONE  Compiled successfully in 2670ms                    
  App running at:
  - Local:   http://localhost:8080/ 
  - Network: http://10.38.109.192:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build.
![007.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/14896dd5-2cbe-09cf-f0cb-ceba5b9c12f3.png)

下記にアクセスする
http://localhost:8080/ 

成功
![008.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/0debfa58-638d-7c2e-e159-68ec7c65611c.png)


★開発サーバを停止する時は ctrl + c 


<br>
<br>
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">🍬Vue.js🍬<br>Vue CLI（v4.0.4） でVue.js作って、<br>Firebase(FirebaseHosting) にデプロイしてみたよぉ🤩<br><br>【Vue.js】カウントアップ（Firebase・Vue CLI v4.0.4）<a href="https://t.co/W7sWcleX4A">https://t.co/W7sWcleX4A</a><a href="https://twitter.com/hashtag/Vue?src=hash&amp;ref_src=twsrc%5Etfw">#Vue</a> <a href="https://twitter.com/hashtag/vuejs?src=hash&amp;ref_src=twsrc%5Etfw">#vuejs</a> <a href="https://twitter.com/hashtag/Firebase?src=hash&amp;ref_src=twsrc%5Etfw">#Firebase</a> <a href="https://t.co/ajUgvvvoSZ">pic.twitter.com/ajUgvvvoSZ</a></p>&mdash; non (@nonnonkapibara) <a href="https://twitter.com/nonnonkapibara/status/1185650513469038592?ref_src=twsrc%5Etfw">October 19, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
<br>
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">🎬Vue.js🎬<br>YouTubeの動画🎀APIリクエスト一覧表示🎀サンプル<br>作ってみたよぉ。<br>Vue CLI（v4.0.4） Vue.jsのaxiosでAPI通信🌏して、Firebase(FirebaseHosting) にデプロイ💡💡<br>ちゃんと動いたよぉ😍<a href="https://t.co/y7hw3zHRlI">https://t.co/y7hw3zHRlI</a><a href="https://twitter.com/hashtag/Vue?src=hash&amp;ref_src=twsrc%5Etfw">#Vue</a> <a href="https://twitter.com/hashtag/vuejs?src=hash&amp;ref_src=twsrc%5Etfw">#vuejs</a> <a href="https://twitter.com/hashtag/firebase?src=hash&amp;ref_src=twsrc%5Etfw">#firebase</a> <a href="https://t.co/C5zCM6n78R">pic.twitter.com/C5zCM6n78R</a></p>&mdash; non (@nonnonkapibara) <a href="https://twitter.com/nonnonkapibara/status/1185956946630692864?ref_src=twsrc%5Etfw">October 20, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>