VueCLI(Vue.js)の環境構築

本操作は、Windows10のWSL環境で実行しています。

VueCLIのインストール

VueCLIのインストールにはnpmが必要です。

• Node.jsをインストール
  https://nodejs.org/ja/

インストールされたかはバージョン確認をする

$ node -v
v16.14.0

• npmをインストール

sudo npm install -g npm

インストールされたかはバージョン確認をする

$ npm -v
v8.3.1

npmインストール後、vue/cliをインストールします

sudo npm install -g @vue/cli

実行後、@vue/cliのバージョンが出たら成功です。

$ vue --verion
@vue/cli 5.0.4

Vueプロジェクトの作成

プロジェクトを作成したいディレクトリまで移動して、
次のコマンドを実行します。
vue-project 箇所は各自プロジェクト名を設定してくださいね。

$ vue create vue-project

vueのバージョンを選択する画面では、基本Vue3で良いと思います。
記事執筆時点で、Vuetifyを使用する際、Vue3は使用できないのでVue2を選択します。

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

プロジェクト作成まで少し時間がかかります。
下記表示が出たら成功です。

🎉  Successfully created project vue-project.

lsコマンドで、フォルダが作成されているか
確認します。

tutumi@LAPTOP-HCBM44GJ:/mnt/c/work$ ls
JavaScript  laravel  vue-project
Dockerfile  myapp    php   rails

vue-projectが出来ていますね！

その後は、出来たフォルダに移動して、プロジェクトを起動します。

$ cd vue-project
$ npm run serve

> vue-project@0.1.0 serve
> vue-cli-service serve

 INFO  Starting development server...

 DONE  Compiled successfully in 33031ms  1:27:55 PM

  App running at:
  - Local:   http://localhost:8080/
  - Network: http://x.x.x.x:8080/

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

表示されている通り、8080ポートのURLにアクセスしてみます。

http://localhost:8080/

上記の画面がでたら、無事にプロジェクト起動が成功しています。