Vue.jsには以前から、アプリケーションのプロジェクトを自動生成してくれるコマンドラインツールの「Vue CLI」が用意されています。
本ブログでも以前に「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のインストールについては、以下の記事にまとめてあります。
Viteを利用する前に、上記の記事を参考にNode.jsのセットアップを行ってください。
Viteでプロジェクトを作成する
Viteでアプリケーションのプロジェクトを作成する際は、コマンドプロンプトまたはターミナルを使用します。
ここではコマンドプロンプトを使用します。
まず、コマンドプロンプトでプロジェクトを作成する位置（フォルダー）まで移動します。
|
1 |
cd C:\Vite |
ここではCドライブにあるViteというフォルダーにcdコマンドで移動しています。
プロジェクトを作成する場所に移動したら、以下のコマンドを実行します。
|
1 |
C:\Vite>npm init vite-app プロジェクト名 |
「プロジェクト名」の部分に作成するプロジェクトの名前を指定します。
例えば、sampleというプロジェクトではあれば、「npm init vite-app sample」というコマンドを実行します。
|
1 2 3 4 5 6 7 8 9 |
C:\Vite>npm init vite-app sample npx: installed 7 in 5.253s Scaffolding project in C:\Vite\sample... Done. Now run: cd sample npm install (or `yarn`) npm run dev (or `yarn dev`) |
コマンドを実行すると指定プロジェクト名のフォルダーが生成され、その中にファイルが生成されます。
プロジェクトが作成できたら、次に必要なパッケージのインストールを行います。
作成されたフォルダー（ここではsample）に移動します。
|
1 |
cd sample |
フォルダーに移動したら、次のコマンドを実行します。
|
1 |
npm install |
コマンドを実行すると、必要なパッケージがプロジェクトフォルダー内にインストールされます。
パッケージのインストールにはしばらく時間がかかりますので、少し待ちます。
実行が完了すると以下のような内容が表示されます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
C:\Vite>cd sample C:\Vite\sample>npm install > esbuild@0.8.57 postinstall c:\Vite\sample\node_modules\esbuild > node install.js npm notice created a lockfile as package-lock.json. You should commit this file. npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@~2.3.1 (node_modules\chokidar\node_modules\fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.3.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"}) npm WARN sample@0.0.0 No description npm WARN sample@0.0.0 No repository field. npm WARN sample@0.0.0 No license field. added 330 packages from 298 contributors and audited 332 packages in 47.261s 30 packages are looking for funding run `npm fund` for details found 0 vulnerabilities C:\Vite\sample> |
Viteで作成したプロジェクトを実行する
プロジェクトが用意できたら、実際に動作するかどうかを検証します。
コマンドプロンプトで以下のコマンドを実行します。
|
1 |
npm run dev |
コマンドを実行すると、内臓のサーバーを使用してプロジェクトが実行されます。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
C:\Vite\sample>npm run dev > sample@0.0.0 dev c:\Vite\sample > vite [vite] Optimizable dependencies detected: vue Dev server running at: > Network: http://192.168.10.105:3000/ > Local: http://localhost:3000/ > Network: http://172.17.128.1:3000/ |
「Dev server running at:」にある「Local」のアドレス「http://localhost:3000/」に、Webブラウザーでアクセスします。
アクセスして上記のページが表示されれば、プロジェクトの作成は成功しています。
プロジェクトのビルドについて
プロジェクトをビルドする際は、以下のコマンドを実行します。
|
1 |
npm run build |
プロジェクトのビルドはVue CLIと同じになります。
上記のコマンドを実行するとdistフォルダー（ここではC:\Vite\sample\dist）が作成され、公開されるファイルが出力されます。
