【 Vue CLI 環境構築 】コマンド・ライン・インターフェース

前書き

VueCLIのバージョン(2.9.6)からVueCLI3系にアップデートするのにものすごく時間がかかってしまい備忘録も兼ねて執筆。

Vue CLIのインストールと初期設定

すでに旧バージョンをインストール済みの場合は、一度アンインストールする

$ npm uninstall -g vue/cli

旧バージョンのダウンロード

$ npm install -g  vue/cli

最新版のダウンロード

$ npm install -g @vue/cli

Vueのバージョン確認

$ vue --version

新しいプロジェクトの作成

$ vue create プロジェクト名

アップデートするために参考にした記事

Vue2系のプロダクトをVue3へアップデート

Vue CLI の変更点・使い方 (vue-cliから@vue/cliにアップデート)

Homebrewからnodebrewをインストールして、Node.jsをインストールするまで

Vue.js を vue-cli を使ってシンプルにはじめてみる

※Manually select featuresを選択

3つを選択（オプション機能の追加、解除は十字キーで上下に動かし、スペースで選択）

→ Enterで次へ

Vue.jsのバージョンを選択

※2.xまたは、3.x(preview)のどちらかを選択
ここでの注意点は2.xにしないとvuetifyが使えない！

ESlintの種類を選択

→ESLint with error prevention onlyを選択

コード成形のタイミング

→　Lint on saveを選択

babelやconfigの設定

→ In dedicated config filesを選択

設定を保存するかの有無

→ No

インストール完了

cd ディレクトリー名、 npm run serveを順番に入力する

$ cd ディレクトリー名
$ npm run serve

ディレクトリ名（ファイル名）を入力

$ cd ディレクトリー名

サーバーの実行 (開発用のサーバーが起動する）

$ npm run serve

・ development serverが起動する
・ ローカル環境でサーバーが動く

本番環境構築

$ npm run build