Vue.js

【Vue.js】Vue CLI 3.0.1 導入方法【環境構築】

Vue.jsの複数ある環境構築方法の内、「Vue CLI」(v3.0.1)を導入する方法を説明する。

環境

著者の環境

  • npm:6.9.0
  • Vue CLI:3.0.1
  • OS:Windows10 64bit

「Vue CLI」導入に必要なnode.js・npm導入方法から説明する。

OSはWindowsを使用しているが、Macでも同手順でできる想定。

Vue CLI導入方法

node.js ・ npmをインストール

LTSと記載されている方(推奨版)をお勧めする。

Node.js

node.jsをインストールする際にnpmを併せてインストールできる為、「node.jsとは別に改めてnpmをインストールする必要」については考えなくて良い。
インストールが問題なく完了すれば、npmコマンドが使用可能になる。

Vue CLIをインストール

npmを使ってVue.CLIをインストールする。

一例

インストールが問題なく完了すれば、vueコマンドが使用可能になる。

Vue CLIの導入としては、上記までで完了。

Vue CLIを使ったプロジェクト準備にも言及する。

プロジェクト作成

cli-initをインストール

【参考】上記手順を踏んでおかないとプロジェクト作成時にエラー

 

プロジェクト作成

上記の内「to-do-list-app」の部分は任意の値。プロジェクトのフォルダ名になる。例えば「bmi-app」というプロジェクト名にしたいのであれば、「vue init webpack bmi-app」になる。

対話的に指定

プロジェクト名や諸設定を指定していく。

【一例】

上記まで指定し終えると、プロジェクトが出来上がる。

動作確認

作成したプロジェクトに移動

 

作成したプロジェクトを実行

 

ブラウザから下記URLにアクセス

http://localhost:8080

「Welcome to Your Vue.js App」画面が表示される。

参照

Vue.js入門

Vue.js公式

インストール — Vue.js

余談

今回はVue CLI3.0.1の導入方法を紹介したが、3.5.xもそのうち確認して記事にしたい。プロジェクト作成コマンドも訊かれる内容も結構違う印象。

以上。

ABOUT ME
ダイス
アラサーSE(20代)。 主な経験は、PGとしてJava(SpringBoot)、C、PHP(Laravel)、VBAがある。SS、UTの経験有り。最近はUI工程を経験中。 IT業界だけでなく、教育業界(予備校での運営スタッフ)での経験有り。 サイトでは、特定の分野に限定せずに幅広く発信していきます。

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です