月間25,000PV達成! 収益は毎日発生中! 記事はほぼ毎日更新中! ギランバレー症候群に関する情報を集めています

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

             
  • 2019.05.05
  • Vue.js
【Vue CLI 3】新規プロジェクト作成方法を解説!
Advertisement

 

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

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

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

 

 

僕のPC環境

・Node.js:11.13.0

・Vue CLI:3.5.5

 

 

前提

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

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

 

 

Advertisement

 

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

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

 

 

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

 

 

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

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

質問内容 意味 選択内容
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

■参考サイト

URL:「https://qiita.com/chibi929/items/e1b460f549e3d5276476」

 

 

作成したプロジェクトのルートで上記コマンドを実行して確認します。

 

 

新規プロジェクト確認

http://localhost:8080/」にアクセスして、上記画面が表示されればOKです!

 

 

おすすめ本

僕がVue.jsの勉強をする際に購入した本になります。

この本があれば、Vue.jsの基礎は理解できるのでおすすめですよ!

 

 

 

 

まとめ

Vue CLIのバージョンが3になって、プロジェクト作成時の質問が増えましたね。

デフォルトで色々な設定ができるのは非常にありがたいですし、どんどん便利になりますな。

ではまた!

Travelerを知らないの?