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」から表示できる。