【Vue入門】Vue.jsの開発環境構築をしよう！まずは動かしたい初心者向けに解説！

特にこだわりがない方は、このようにしておけばいいと思います！

C:\Users\*****\Documents>mkdir sample-vue-app

C:\Users\*****\Documents>cd sample-vue-app

今後は、このディレクトリ配下で作業していきます！

Vueの開発環境を手早く進めるようVueCLI (Vue Command Line Interface）というツールが提供されています。
Vueプロジェクトの初期セットアップで導入する環境を簡単につくれるようしてくれます！

Vue CLIのインストールは、「npm install -g @vue/cli」をコマンドプロンプトで実行します！

C:\Users\*****\Documents\sample-vue-app>npm install -g @vue/cli

・・・

+ @vue/cli@4.5.11
added 359 packages from 168 contributors, removed 69 packages, updated 307 packages and moved 5 packages in 99.44s

色々、メッセージが出てくると思いますが、「vue –version」でバージョン情報が出てくればインストールはOKです！

C:\Users\*****\Documents\sample-vue-app>vue --version
@vue/cli 4.5.11

私の場合は、4.5.11 というバージョンになってます！

ここまできたら、あとはProjectを作成するだけです！！
Projectは、アプリの単位だと思っておけば問題ないと思います。

Vue CLIを使えば、簡単にProjectの雛形を作ることが出来ます！

まずは、「vue create [Project名]」をコマンドプロンプトで実行しましょう！

C:\Users\*****\Documents\sample-vue-app>vue create sample-client

実行すると、選択肢が３つ出てくると思いますが、今回は、Default（Vue2）を選択します！

・Default（Vue3 Preview）は、まだリリース前なので今回は使用しませんでした。
・Manually select featuresは、必要なパッケージを自分で選択して構築できるのですが、後からでもパッケージはインストールできるので、今回は使用しませんでした。

選択すると、作成が始まっていきます！！
色々、メッセージが流れていきますが、「Successfully created project [project名]」が出ていれば完了です！

・・・
Successfully created project sample-client.
Get started with the following commands:

 $ cd sample-client
 $ npm run serve

先ほど作成した雛形プロジェクトに移動して、アプリを起動してみましょう！

雛形プロジェクトを作成した際のメッセージの最後に、このようなメッセージがあったと思います。

 $ cd sample-client
 $ npm run serve

この通りにコマンドプロンプトで実行したらアプリが起動できます！
コマンドプロンプトで実行すると、こんな感じです！

C:\Users\*****\Documents\sample-vue-app>cd sample-client

C:\Users\*****\Documents\sample-vue-app\sample-client>npm run serve

> sample-client@0.1.0 serve C:\Users\*****\Documents\sample-vue-app\sample-client
> vue-cli-service serve

 INFO  Starting development server...
98% after emitting CopyPlugin

 DONE  Compiled successfully in 3577ms                                                                                                                                                1:33:36


  App running at:
  - Local:   http://localhost:8080/
  - Network: http://192.168.0.105:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

ここまでできたら、「http://localhost:8080/」にアクセスしてみましょう！！

この画面が表示されれば、環境構築は完了です！！