Vue.jsには、アプリケーションのプロジェクトのテンプレートを自動生成してくれるコマンドラインツールの「Vue CLI」が用意されています。
Vue CLIは、Vue.jsのアプリケーションを開発するための前準備支援してくれるツールになります。
Vue CLIでは、プロジェクトという単位で開発を行います。Vue CLIでプロジェクトを作成すると、プロジェクトに必要な機能やツールをインストールしてくれます。
ですので、Vue CLIを利用することで、すぐにアプリケーションの開発を行うことができるようになります。
CLIは、Commnad Line Interface（コマンドラインインターフェース）の略で、コンピューターまたはソフトウェアが、ユーザー（利用者）の操作を受け付けたり、ユーザーに情報を表示したりする際に、文字のみによって対話を行う方式のUI（ユーザーインターフェース）です。
本記事では、Vue CLIを利用してプロジェクトを作成する方法について紹介します。
目次
Node.jsのインストールとセットアップ
Vue CLIを利用するために、Node.js（npm）が必要になります。
Node.jsのインストールについては、以下の記事にまとめてあります。
Vue CLIを利用する前に、上記の記事を参考にNode.jsのセットアップを行ってください。
Vue CLIのインストール
Node.jsがインストールできたら、コマンドプロンプトなどのコマンドラインツールで、次のコマンドを実行します。
|
1 |
npm install -g @vue/cli |
上記のコマンドを実行すると、グローバル領域にVue CLIがインストールされます。
Vue CLIはバージョン2.xの時点では「vue-cli」でしたが、バージョン3.xで「vue/cli」にパッケージ名が変更になりました。
バージョン2.xが既にインストールされている場合は、一旦アンインストールしてからインストールしてください。
|
1 2 |
npm uninstall -g vue-cli npm install -g @vue/cli |
上記の例ではコマンドの引数に「-g」を指定して、グローバルインストールを行っています。
グローバルインストールを行わない場合（特定のフォルダーにVue CLIをローカルインストールする場合）は、カレントフォルダーをVue CLIをインストールするフォルダーに変更（移動）して、引数に「-g」を指定せずにinstallコマンドを実行してください。
|
1 2 |
cd c:\vue-cli\projects\sample npm install @vue/cli |
※「c:\vue-cli\projects\sample」の部分には、任意のフォルダーのパスを指定してください。
これでVue CLIのインストールは完了です。
Vue CLI プロジェクトの作成
Vue CLIがインストールできたら、プロジェクトを作成します。
Vue CLIでは、アプリケーションをプロジェクトといわれるフォルダーで管理します。
プロジェクトフォルダー内に配置されたファイルは、すべてプロジェクトに属します。
プロジェクトを作成するには、コマンドプロンプトで以下のコマンドを実行します。
Vue CLIをグローバルインストールしている場合
|
1 |
vue create プロジェクト名 |
Vue CLIをローカルインストールしている場合
|
1 |
npx vue create プロジェクト名 |
ローカルインストールの場合は「vue create プロジェクト名」の前に「npx」を付加して、npxコマンドで実行します。
※ npxコマンドは、run-scriptを使用せずにローカルインストールしたコマンドを実行します。グローバルインストールせずに一度だけコマンドを実行する場合に使用できます。
プロジェクトの作成例
以下にプロジェクトの作成例（コマンド）を示します。
ここでは、「hello-vue-cli」という名前のプロジェクトを作成します。
先ず、プロジェクトを作成するフォルダーに移動します。
|
1 |
cd プロジェクトを作成するフォルダーのパス |
cdコマンドでプロジェクトを作成するフォルダーに移動したら、以下のコマンドを実行します。
|
1 |
vue create hello-vue-cli |
または
|
1 |
npx vue create hello-vue-cli |
上記のコマンドを実行すると、プロジェクトの作成が始まります。
プロジェクトの作成では、プロジェクトをどのように作成するかを指定します。
プリセット（preset）の選択
vue createコマンドを実行すると、プリセットの選択が表示されます。
|
1 2 3 4 5 |
Vue CLI v4.5.12 ? Please pick a preset: (Use arrow keys) > Default ([Vue 2] babel, eslint) Default (Vue 3 Preview) ([Vue 3] babel, eslint) Manually select features |
ここでは、手動でプロジェクトの設定を行いますので「Manually select features」を選択します。
項目の選択は↑↓キーで行います。決定はEnterキーで行います。
プロジェクトにインストールするモジュールの選択
Manually select featuresを選択すると、プロジェクトの設定をしていくことになります。
まずは、プロジェクトにインストール（適用）するモジュールを選択する画面が表示されます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
Vue CLI v4.5.12 ? Please pick a preset: Manually select features ? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection) >(*) Choose Vue version (*) Babel ( ) TypeScript ( ) Progressive Web App (PWA) Support ( ) Router ( ) Vuex ( ) CSS Pre-processors (*) Linter / Formatter ( ) Unit Testing ( ) E2E Testing |
ここでプロジェクトに必要なモジュールを選択します。
今回は説明のために最小限度の構成にしますので「inter / Formatter」のみ選択して続行します。
↑↓キーで項目を選択してspaceキーを押すと項目の選択／解除ができます。
選択可能なモジュールの一覧
| モジュール | 説明 |
|---|---|
| Choose Vue version | Vue.jsのバージョンを指定します。バージョンを指定しない場合は最新になります。 |
| Babel | JavaScriptのES6をES5にしてくれるコンパイラのBabelを使用するかどうかを指定します。 |
| TypeScript | TypeScriptを使用するかどうかを指定します。 |
| Progressive Web App (PWA) Support | PWAのサポートを使用するかどうかを指定します。 |
| Router | Vue Routerを使用するかどうかを指定します。 |
| Vuex | Vuexを使用するかどうかを指定します。 |
| CSS Pre-processors | CSSプリプロセッサーを使用するかどうかを指定します。 |
| Linter / Formatter | LinterやFormatterを使用するかどうかを指定します。 |
| Unit Testing | ユニットテストを使用するかどうかを指定します。 |
| E2E Testing | E2E（End to End）テストを使用するかどうかを指定します。 |
- PWAは、モバイル端末でウェブサイトを表示する時に、ネイティブアプリと同様の動作（使い勝手）を可能にするための仕組みです。
- Router（Vue Router）は、Vue.jsでシングルページアプリケーションを構築するためのルーターです。
- Vuexは、Vue.js アプリケーションのための状態管理パターン + ライブラリです。
- CSSプリプロセッサーは、Sass(SCSS)、PostCSS、Stylus、Lessなどのメタ言語を使用できるようにするための仕組みです。
- Linterは、エラーや潜在的なバグを警告してくれる静的解析ツールです。Formatterは、スペースやインデント、改行等のコーディングスタイルを統一してくれるツールです。Linter / Formatterを使用することでコードの記述ルールを統一することができます。
Linterの設定の選択
インストールするモジュールでLinterを選択すると、Linterの設定を選択する画面が表示されます。
|
1 2 3 4 5 6 7 8 |
Vue CLI v4.5.12 ? Please pick a preset: Manually select features ? Check the features needed for your project: Linter ? Pick a linter / formatter config: (Use arrow keys) > ESLint with error prevention only ESLint + Airbnb config ESLint + Standard config ESLint + Prettier |
ここでは「ESLint with error prevention only（エラー防止のみのESLint）」を選択します。
Lintを実行するタイミングの選択
Linterの設定の次はLintを実行するタイミングを選択する画面が表示されます。
|
1 2 3 4 5 6 7 |
Vue CLI v4.5.12 ? Please pick a preset: Manually select features ? Check the features needed for your project: Linter ? Pick a linter / formatter config: Basic ? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection) >(*) Lint on save ( ) Lint and fix on commit (requires Git) |
ここでは「Lint on save（保存時に実行）」を選択します。
Babel、ESLintなどの構成の配置先の選択
Lintを実行するタイミングの選択の次は、Babel、ESLintなどの構成をどこに配置するかどうかを選択する画面が表示されます。
|
1 2 3 4 5 6 7 8 |
Vue CLI v4.5.12 ? Please pick a preset: Manually select features ? Check the features needed for your project: Linter ? Pick a linter / formatter config: Basic ? Pick additional lint features: Lint on save ? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys) > In dedicated config files In package.json |
「In dedicated config files」は、個別のファイルにするかどうかの指定です。
「In package.json」は、package.json内にまとめてしまうかどうかの指定です。
ここでは個別のファイルに配置しますので「In dedicated config files」を選択します。
プロジェクトの設定を保存するかどうかの選択
最後にVue CLIで作成するプロジェクトの設定を保存するかどうかを確認する画面が表示されます。
|
1 2 3 4 5 6 7 |
Vue CLI v4.5.12 ? Please pick a preset: Manually select features ? Check the features needed for your project: Linter ? Pick a linter / formatter config: Basic ? Pick additional lint features: Lint on save ? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files ? Save this as a preset for future projects? (y/N) |
ここでは保存はしないので「N」を指定します。保存する場合は「Y」を指定してください。
Enterキーを押すと、プロジェクトの作成が始まります。
プロジェクトの作成には少し時間がかかりますので、しばらく待ちます。
プロジェクトの作成が完了すると、コマンドを実行したフォルダーに指定した名前のプロジェクトフォルダーが作成されます。
アプリケーションの実行
プロジェクトが作成できたら、アプリケーションとして動作するかどうかを確認します。
開発サーバーの実行
プロジェクトの作成が完了するとコマンドプロンプト上に、アプリケーションを実行するためのコマンドが「Get started with the following commands:」の後に表示されます。
|
1 2 3 4 |
Get started with the following commands: $ cd hello-vue-cli $ npm run serve |
「cd hello-vue-cli」を実行してプロジェクトフォルダーに移動し、「npm run serve」を入力して開発用のサーバーを実行します。
アプリケーションの起動（ページの表示）
サーバーが実行できたら以下のメッセージが表示されます。（メッセージの表示まではしばらく時間がかかる場合があります。）
|
1 2 3 4 |
> hello-vue-cli@0.1.0 serve C:\Data\vue\vue-cli\projects\hello-vue-cli > vue-cli-service serve INFO Starting development server... |
上記のメッセージが表示されたら、ChromeやEdgeなどのブラウザーでページを表示します。
ブラウザーのアドレスバーに「http://localhost:8080/」と入力して接続します。
「http://localhost:8080/」に接続すると上記のようなページが表示されます。
これで、アプリケーションを開発する準備は完了です。
サーバーを停止する場合はコマンドプロンプトでCtrl + Cキーを押してください。
Ctrl + Cキーを押すと
「バッチ ジョブを終了しますか (Y/N)?」
というメッセージが表示されますので、「Y」を指定（入力してEnter）すると、サーバーが停止します。
