Vue.jsの複数ある環境構築方法の内、「Vue CLI」(v3.0.1)を導入する方法を説明する。
Contents
環境
著者の環境
- 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と記載されている方(推奨版)をお勧めする。
Vue CLIをインストール
npmを使ってVue.CLIをインストールする。
|
1 |
npm install -g @vue/cli@3.0.1 @vue/cli-service-global@3.0.1 |
一例
|
1 2 3 4 |
C:\>vue --version 3.5.0 C:\> |
Vue CLIの導入としては、上記までで完了。
Vue CLIを使ったプロジェクト準備にも言及する。
プロジェクト作成
cli-initをインストール
|
1 |
npm install -g @vue/cli-init@3.0.1 |
【参考】上記手順を踏んでおかないとプロジェクト作成時にエラー
プロジェクト作成
|
1 |
vue init webpack to-do-list-app |
対話的に指定
プロジェクト名や諸設定を指定していく。
【一例】
上記まで指定し終えると、プロジェクトが出来上がる。
動作確認
作成したプロジェクトに移動
|
1 |
cd to-do-list-app |
作成したプロジェクトを実行
|
1 |
npm run dev |
ブラウザから下記URLにアクセス
「Welcome to Your Vue.js App」画面が表示される。
参照
Vue.js入門
Vue.js公式
余談
今回はVue CLI3.0.1の導入方法を紹介したが、3.5.xもそのうち確認して記事にしたい。プロジェクト作成コマンドも訊かれる内容も結構違う印象。
以上。
