【Vue CLI 3】新規プロジェクト作成方法を解説！ │ Traveler

Vue.jsで新規プロジェクトを作成したいんじゃ！！

前回作成したことがあったのですが、バージョンが変わったことによって色々と手順も変わってるみたいです。

ということで今回は、Vue CLI 3での新規プロジェクト作成方法を解説します！

■前回の記事はこちら

Traveler

【Vue CLI 2】CLI導入方法とプロジェクト作成方法を解説！

https://traveler0401.com/vue-js-vue-project/

Vue.jsを用いた開発において重要となるVue CLI。今回はVue CLIのインストールから、Vueプロジェクトの作成方法を解説していきます。 Vue CLIとはVue CLIとは、Vue.jsを使ったアプリケーション開発を支援するためのコマンドラインインターフェースです。Vu...

1. 僕のPC環境
2. 前提
3. 新規プロジェクト作成方法
4. おすすめ本
5. まとめ

僕のPC環境

・Node.js：11.13.0

・Vue CLI：3.5.5

前提

・Node.jsがインストールされていること

・Vue.jsがインストールされていること

新規プロジェクト作成方法

では早速ですが、新規プロジェクトを作成していきましょう！

vue create <プロジェクト名>

1	vue create <プロジェクト名>

上記コマンドを実行します。

色々と質問されますが、今回は以下のように選択しました。

作成したいプロジェクトに合うように選択していけば、あとは勝手にプロジェクトが作成されます。

質問内容	意味	選択内容
Please pick a preset	プロジェクトを自動作成するか、手動作成するかどうか	Manually select features(手動)
Check the features needed for your project	プロジェクトで使用したいものを選択	Babel, TS, PWA, Router, Vuex, CSS Pre-processors, Linter, Unit, E2E
Use class-style component syntax?	単一ファイルコンポーネントでクラススタイルのコンポーネント構文を使用するかどうか	Yes
Use Babel alongside TypeScript for auto-detected polyfills?	自動検出されたポリフィルに対してTypeScriptと並んでBabelを使用するかどうか	Yes
Use history mode for router? (Requires proper server setup for index fallback in production)	ルーターのヒストリーモードを使用するかどうか	Yes
Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default)	CSSプリプロセッサの言語の選択	Stylus
Pick a linter / formatter config	linter / formatter に何を使うか	TSLint
Pick additional lint features	Lint をかけるタイミングをどうするか	Lint on save, Lint and fix on commit
Pick a unit testing solution	Unitテストのフレームワークに何を使うか	Jest
Pick a E2E testing solution	E2Eテストのフレームワークに何を使うか	Nightwatch
Where do you prefer placing config for Babel, PostCSS, ESLint, etc.?	各ツールの設定内容の保存先	In package.json
Save this as a preset for future projects?	このVue CLIの対話内容をプリセットとして保存するかどうか	N