【Vue】Vue CLI ～ 入門編 ～

Vue

■ はじめに

https://dk521123.hatenablog.com/entry/2020/04/30/000000
https://dk521123.hatenablog.com/entry/2020/12/19/000000

の続き。

目次

【１】Vue CLI とは？
【２】環境構築
【３】Vue CLIコマンド
　１）vue-cli-service serveコマンド
　２）vue init コマンド / vue create コマンド

【１】Vue CLI とは？

* 開発環境をセットアップしてくれたりする便利コマンドラインツール

できること 

* プロジェクト作成
* 開発サーバ稼働
* ビルド
* コンパイル
* 単体テスト
* 静的コード解析
etc...

【２】環境構築

１）Node をインストールする 

* 以下の関連記事を参照のこと。

https://dk521123.hatenablog.com/entry/2018/06/05/211900

２）コマンドで設定を行う 

# インストール
npm install -g @vue/cli @vue/cli-service-global

# 確認
vue --version
@vue/cli 4.5.9

補足：トラブルシュートのために... 

* 以下のコマンドでbinの場所を確認できる
~~~~~~~
npm bin -g
~~~~~~~

【３】Vue CLIコマンド

* 以下のサイトが詳しい

https://fumiononaka.com/Business/html5/FN1809001.html

１）vue-cli-service serveコマンド

* 開発用サーバーを起ち上げる

構文 

vue-cli-service serve [options]

例 

# --open：ブラウザが自動で開く
vue-cli-service serve --open

２）vue init コマンド / vue create コマンド

* ゼロから作るアプリケーションのテンプレートを作成
* vue init / vue create コマンドの違いは、以下のサイトを参照。

https://qiita.com/teraco/items/74a6104d3e201c4f654e

構文：vue init コマンド 

vue init webpack [project-name]

例：vue init コマンド 

# vue-init をインストールする
npm install -g @vue/cli-init

# 「my-app」ってプロジェクトを新規で立ち上げる
vue init webpack my-app

<<質問が来るので答える>>
? Project name my-app
? Project description Hello world
? Author sample
? Vue build standalone      
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests Yes
? Pick a test runner jest
? Setup e2e tests with Nightwatch? Yes
? Should we run `npm install` for you after the project has been created? (recommended) npm

   vue-cli · Generated "my-app".

...略...

To get started:

  cd my-app
  npm run dev

Documentation can be found at https://vuejs-templates.github.io/webpack

構文：vue create コマンド 

vue create [project-name]

例：vue create コマンド 

vue create my-app
~~~~~
<<質問が来るので答える>>
Vue CLI v4.5.9
? Please pick a preset: (Use arrow keys)
  Default ([Vue 2] babel, eslint) 
  Default (Vue 3 Preview) ([Vue 3] babel, eslint)
> Manually select features  <=今回は、こちらを選ぶ

<<質問が来るので答える>>
Vue CLI v4.5.9
? Please pick a preset: Manually select features
? Check the features needed for your project: 
 (*) Choose Vue version
 (*) Babel
 (*) TypeScript
>(*) Progressive Web App (PWA) Support        
 (*) Router
 (*) Vuex
 ( ) CSS Pre-processors
 (*) Linter / Formatter
 (*) Unit Testing
 (*) E2E Testing

<<質問が来るので答える>>
? Choose a version of Vue.js that you want to start the project with 
  2.x
> 3.x (Preview)

・・・略・・・
~~~~~

参考文献

https://igatea.hatenablog.com/entry/2018/10/27/114113
https://dev.classmethod.jp/articles/change-vue-project-devserver-port/
https://qiita.com/tomo0/items/8dc619cc271f4c69658a

関連記事

Vue ～ 入門編 ～
https://dk521123.hatenablog.com/entry/2020/04/30/000000
Vue + NightWatch で E2Eテスト をする
https://dk521123.hatenablog.com/entry/2021/02/06/220603