[Vue.js]Viteを導入してみる

早い早いと話題のVite(ヴィート)。フランス語で「素早い」の意味らしいです。
Webpackではアプリケーション起動前に、アプリ全体を走査し依存を解決→バンドルしたソースを出力という流れだったのに対し、ViteはNative ESModulesのimportを利用し、ブラウザから直接モジュールを読み込むことで高速化を実現しています。

モジュールバンドラーRollup を使用してコードをバンドル…とあるので、ノーバンドルツールと言われつつもバンドルしない訳ではないようです。

この辺りの解説はANTEZさんの記事やっぱりwebpackがわからない（エピソード1）が超絶わかりやすかったです。

プロジェクト作成

前提

Viteを使うには、Node.jsが14.18+、16+でなければなりません。

% cd projects
% npm create vite@latest
Need to install the following packages:
  create-vite@3.2.0
Ok to proceed? (y) y
✔ Project name: … vite-app
✔ Select a framework: › Vue
✔ Select a variant: › JavaScript

Scaffolding project in /Users/meow/Documents/projects/vite-app...

プロジェクト名や使用するテンプレートはオプションでも指定可能。

# npm 6.x
npm create vite@latest my-vue-app --template vue

とりあえず起動

npm install
npm run dev

テーン！！

後からわかったのですが、`npm create vite’でプロジェクト作成した時はstoreやらrouteやらを自分で入れなければいけないみたいですね。というわけでこちらにまとめました。

[Vue.js]続・Viteを導入してみる

Vite / vue.js / vue3

ほか参考

Vite