【Vue.js】vue-cliを使ってプロジェクトを作成し起動するまでの手順

Vue-CLI 4でプロジェクトを作成し起動するまでの備忘録です。
vue createでプロジェクトを自動生成します。

vue create pjName

プロジェクト作成をチュートリアルに沿って選択していきます。
何をしているかは下記ページでざっと把握しました。
Vue-CLI 4を使用したJavaScript開発環境構築(プロトタイプ版とプロジェクト版)

・Please pick a preset:
プロジェクトの作成方法を選択します。
Manually select features を選択して、設定を選択していきます。

・Check the features needed for your project:
プロジェクトへ導入するライブラリを選択します。
今回は「Babel」「Router」「Vuex」「Linter」

・Use history mode for router?
Vue RouterのHistoryモードを利用するかを設定します。
今回は利用する設定(Yes)をします。

・Pick a linter / formatter config:
ESLintのプリセットを選択します。
基本的には「Standard」を選択すれば問題ありません。

・Pick additional lint features:
ESLintの実行タイミングを選択します。
保存時に実行する設定(Lint on Save)を選択

・Where do you prefer placing config for Babel, ESLint, etc.?
ライブラリ(BabelやESLint)の設定ファイルの配置個所を選択します。
今回は「In dedicated config files(専用の設定ファイル内)」を選択。

・Save this as a preset for future projects?
次回以降のcreate projectで利用できるプリセットに登録するか設定します。
今回は設定しません。

> Please pick a preset: Manually select features
> Check the features needed for your project: Babel, Router, Vuex, Linter
> Use history mode for router? (Requires proper server setup for index fallback in p
roduction) Yes
> Pick a linter / formatter config: Standard
> Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to
invert selection)Lint on save
> Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config fi
les
> Save this as a preset for future projects? (y/N) n

上記設定を完了させ、下記画面が出れば作成完了です。

Successfully created project pjName.
Get started with the following commands:
$ cd pjName
$ npm run serve

npm run serveでローカル内にサーバが起動されます
localhost:8080でブラウザからアクセスすると、サンプルページが表示されます。

作成されているソース類をVSCodeで見るときにvueのファイルを開いて文字がすべて白になっている場合は、
VSCodeの拡張機能の「Vetur」をインストールすると構文ごとに色付けされます。