Viteでプロジェクトを作成する [Vue.js]

Vue.js The Progressive JavaScript Framework

Vue.jsには以前から、アプリケーションのプロジェクトを自動生成してくれるコマンドラインツールの「Vue CLI」が用意されています。

本ブログでも以前に「Vue CLI」を使ってプロジェクトを作成する方法についてご紹介しました。

Vue CLIでプロジェクトを作成する [Vue.js]
Vue.jsには、アプリケーションのプロジェクトのテンプレートを自動生成してくれるコマンドラインツールの「Vue CLI」が用意され...

Vue CLIは、Vue.jsを利用してアプリケーションを作成する際の基本的なツールになります。
Vue CLIは、アプリケーションプロジェクトの作成だけではなく、GUI管理ツールなどの様々な機能が用意されています。
様々な機能が用意されており、高機能なので、小規模なアプリケーションから大規模なアプリケーションまで、どのようなアプリケーションのプロジェクトの作成にも適しています。
しかし、高機能であるがゆえに、ビルドやサーバー機能などの動作が少し遅い面があります。

そこでVue3では、Vue CLIとは別のツールとして「Vite」という新しプロジェクト管理ツールが用意されました。
Viteは、Vue.js作者のEvan You氏らが開発している

最新のWebプロジェクトに高速でスリムな開発エクスペリエンスを提供することを目的としたビルドツール
Vite 概要

です。

今回は、Vue.jsのプロジェクトを作成するツールのViteについて紹介します。

Node.jsのインストールとセットアップ

Viteを利用するために、Node.js(npm)が必要になります。

Node.jsのインストールについては、以下の記事にまとめてあります。

Node.jsのダウンロードとインストール(セットアップ)
Node.jsは利用者が作成するシステムの規模(スケール)の変化に柔軟に対応できるネットワークアプリケーション(Webアプリケーショ...

Viteを利用する前に、上記の記事を参考にNode.jsのセットアップを行ってください。

Viteでプロジェクトを作成する

Viteでアプリケーションのプロジェクトを作成する際は、コマンドプロンプトまたはターミナルを使用します。
ここではコマンドプロンプトを使用します。

まず、コマンドプロンプトでプロジェクトを作成する位置(フォルダー)まで移動します。

ここではCドライブにあるViteというフォルダーにcdコマンドで移動しています。

プロジェクトを作成する場所に移動したら、以下のコマンドを実行します。

「プロジェクト名」の部分に作成するプロジェクトの名前を指定します。

例えば、sampleというプロジェクトではあれば、「npm init vite-app sample」というコマンドを実行します。

コマンドを実行すると指定プロジェクト名のフォルダーが生成され、その中にファイルが生成されます。

プロジェクトが作成できたら、次に必要なパッケージのインストールを行います。
作成されたフォルダー(ここではsample)に移動します。

フォルダーに移動したら、次のコマンドを実行します。

コマンドを実行すると、必要なパッケージがプロジェクトフォルダー内にインストールされます。
パッケージのインストールにはしばらく時間がかかりますので、少し待ちます。
実行が完了すると以下のような内容が表示されます。

Viteで作成したプロジェクトを実行する

プロジェクトが用意できたら、実際に動作するかどうかを検証します。

コマンドプロンプトで以下のコマンドを実行します。

コマンドを実行すると、内臓のサーバーを使用してプロジェクトが実行されます。

「Dev server running at:」にある「Local」のアドレス「http://localhost:3000/」に、Webブラウザーでアクセスします。

ViteでVue.jsのアプリケーションプロジェクトを作成して実行
アクセスして上記のページが表示されれば、プロジェクトの作成は成功しています。

プロジェクトのビルドについて

プロジェクトをビルドする際は、以下のコマンドを実行します。

プロジェクトのビルドはVue CLIと同じになります。
上記のコマンドを実行するとdistフォルダー(ここではC:\Vite\sample\dist)が作成され、公開されるファイルが出力されます。

Vue.js 入門 Tips 一覧