Vue CLI:セットアップと開発環境整備

Vue CLI:セットアップと開発環境整備



Vue開発で便利なツール


VueCLI

VueCLIインストール

インストールコマンド

npm install -g @vue/cli

インストール確認

vue --version
@vue/cli 4.5.11


yarnを使っている方はこちら

yarn global add @vue/cli


プロジェクトの新規作成は、CLIとUIの2つの方法がある。

下記(a)(b)のどちらか一方をやればおk。


(a-1) プロジェクト新規作成(CLIで作る方法)

CLIでコマンド実行。

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

いくつか候補が出てくるが、とりあえず「Default ([Vue 2] babel, eslint)」を選んでみた。


(a-2)開発用サーバをたてる

cd testjs
npm run serve

localhost:8080 で今作成したページが見れる。


(b-1) プロジェクト新規作成(Vue UIで作る方法)

ブラウザ画面でプロジェクト作成できる。

コマンドラインで以下を打つ。

vue ui

Vue UIがブラウザの画面で表示される。


UIでのプロジェクトの作成方法

  • 画面上で、上部タブでCreateをクリック。

  • プロジェクトを作りたいディレクトリに移動して、画面下の「create a new project here」をクリック。

  • プロジェクト名などを入力して作成。

  • 下記に記載するRouterを使いたい場合などは、Manualを選択して、有効化する機能の一覧からRouterを選ぶと楽。

  • linter/formatting configは、ESLint+Prettierを選んでみた。
  • Lint on saveオプションもONにするといいかも。
  • 上記の設定は、次回プロジェクト作成のためにプリセットとして保存しておける。


作成完了したら、ダッシュ―ボードがブラウザで表示される。

ここからプラグイン追加など色々できる。


(b-2)開発用サーバをたてる

ダッシュボードから「プロジェクトタスク」を開く。

左のメニューから「serve」を選択、「タスクの実行/Run task」をクリックしてサーバを起動し、少し待って起動完了したら「アプリを開く/Open App」から表示できる。