Vue CLIでプロジェクトを作成&起動する方法

概要

@vue/cliで新規にプロジェクトを作成し起動する方法を記載する。

手順

プロジェクトの作成

コマンドプロンプトで以下のコマンドを入力する。

$ vue create [プロジェクト名]
例：vue create sample_project

その後、以下のようなpresetの選択肢が表示されるため選択する。
DefaultかManually select features(自分で細かく設定する)かが選べるが今回はDefaultを選択

Vue CLI v4.5.12
? Please pick a preset: (Use arrow keys)
> Default ([Vue 2] babel, eslint)
  Default (Vue 3 Preview) ([Vue 3] babel, eslint)
  Manually select features

上記選択後、プロジェクトの作成が行われるのでしばらく待つと以下のような表示になる。
これが表示されたらプロジェクトの作成は完了

// 省略

success Saved lockfile.
Done in 9.48s.
⚓  Running completion hooks...

📄  Generating README.md...

🎉  Successfully created project sample_project.
👉  Get started with the following commands:

 $ cd sample_project
 $ yarn serve

プロジェクトの起動

cdコマンドでプロジェクト配下に移動し、yarn serveでプロジェクトを起動する。

$ cd sample_project
$ yarn serve

その後、以下のような表示になったらプロジェクトの起動は成功

$ yarn serve
yarn run v1.22.0
$ vue-cli-service serve
 INFO  Starting development server...
98% after emitting CopyPlugin

 DONE  Compiled successfully in 2329ms                                                                                                                                      23:07:11


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

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

ページにアクセス

上記のLocal:またはNetwork:に表示されているURLをブラウザに入力してみると、以下のようなページが表示される。