Vue.jsで新規プロジェクトを作成したいんじゃ！！
前回作成したことがあったのですが、バージョンが変わったことによって色々と手順も変わってるみたいです。
ということで今回は、Vue CLI 3での新規プロジェクト作成方法を解説します！
前回記事
Vue.jsを用いた開発において重要となるVue CLI。 今回はVue CLIのインストールから、Vueプロジェクトの作成方法を解説していきます。 Vue CLIとは Vue CLIとは、Vue.jsを使ったアプリケーション開発[…]
前提
- Node.jsがインストールされていること
- Vue.jsがインストールされていること
新規プロジェクト作成方法
では早速ですが、新規プロジェクトを作成していきましょう！
|
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 |
|
1 |
> npm run serve |
作成したプロジェクトのルートで上記コマンドを実行して確認します。
「http://localhost:8080/」にアクセスして、上記画面が表示されればOKです！
おすすめ本
僕がVue.jsの勉強をする際に購入した本になります。
この本があれば、Vue.jsの基礎は理解できるのでおすすめですよ！
まとめ
Vue CLIのバージョンが3になって、プロジェクト作成時の質問が増えましたね。
デフォルトで色々な設定ができるのは非常にありがたいですし、どんどん便利になりますな。
ではまた！