Vue3で新規プロジェクトを作成する際、vite@latest とvue@latest の二通りのコマンドが紹介されていました。
Vite（ヴィート）の公式ドキュメントはvite@latest、Vueの公式ドキュメントはvue@latestについてそれぞれインストールガイドが書かれています。当然といえば当然なのですが・・・。
どう違うの？
ってことで試してみることにしました。
実際にプロジェクトを作ってみる
Viteでプロジェクトを作ってみる
まずはViteから。下記コマンドでプロジェクトを作成します。テンプレートはVueを使います。
$ npm create vite@latest vite-proj -- --template vue
※ node.js は 18.12.1, npm は 8.19.2 を使っています。コマンドを実行すると下記のようにプロセスを進めて良いか確認されるので、そのままy応答します。
Need to install the following packages:
create-vite@4.0.0
Ok to proceed? (y) yプロジェクト作成の準備が終わると、完了通知が表示されるので指示に従います。
Done. Now run:
cd vite-proj
npm install
npm run dev作成されたディレクトリ構成と予めインストールされたパッケージはこんな感じでした。
run dev してみるとこんな感じ。
$ npm run dev
Vue公式の方法を試す
次はVue公式の方法を試します。コマンドは下記。こちらはプロジェクト名を後で指定できるっぽいです。
$ npm init vue@latestViteのときと同様にプロセスを進めいて良いか聞かれるのでy応答します。
Need to install the following packages:
create-vue@3.5.0
Ok to proceed? (y) ycreate-vueのバージョンに違いが出てます。オプションを色々選択できるみたいですが、ドキュメントによると
もしオプションについてはっきりとわからないなら、今のところ単純にエンターを押して No を選んでください。プロジェクトが作成されたら、指示に従って依存関係をインストールし開発サーバーを起動しましょう
Vue公式ドキュメント（https://ja.vuejs.org/guide/quick-start.html#creating-a-vue-application）
とのことなので素直に従います。
Vue.js - The Progressive JavaScript Framework
✔ Project name: … vue-proj
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit Testing? … No / Yes
✔ Add an End-to-End Testing Solution? › No
✔ Add ESLint for code quality? … No / Yesプロジェクト作成の準備が終わると、こちらもViteと同様の指示が来るので従います。
Done. Now run:
cd vue-proj
npm install
npm run dev作成されたディレクトリ構成と予めインストールされたパッケージはこんな感じでした。
run dev してみるとこんな感じ。
$ npm run dev
パっと見ですがあまり違わないような・・・。違うところはpackage.json のtype:”module”表記とvite.config.jsの “@”のエイリアスくらいか・・・。あとはデフォルトのCSSファイルの読み込み。
まとめ
vue@latest でプロジェクトを作成すると、「オプションで初期設定を選べるようになる。」くらいしか違いがわかりませんでした。
ただ、TypeScript などを使用する場合はこれが重要というか気にかけるポイントになるようです。vue@latest のオプションでTypeScript をセットアップした場合、構成済のtsconfig.json がプロジェクトに含まれるとのこと。
手動でセットアップするのは面倒なので自動でやってくれるvue@latest を使うのが便利そうです。
中途半端な内容ですが、深みにハマりそうなのでここまでにしておきました。
コメント