vue cli(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のプリセットを選択します。
Build a Real-time Chat App with Pusher and Vue.jsでは、Basicとなっていますが、存在しないので「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 vue-chatkit.
Get started with the following commands:
$ cd vue-chatkit
$ npm run serve
この状態で、プロジェクトを作成したフォルダへ移動し下記コマンドを実行すると、
ローカル内にサーバが起動されます。
npm run serve
localhost:8080でブラウザからアクセスすると、サンプルページが表示されます。
作成されているソース類をVSCodeで見るときにvueのファイルを開いて文字がすべて白になっている場合は、
VSCodeの拡張機能の「Vetur」をインストールすると構文ごとに色付けされます。