Vue-CLIの動作遅いなぁ。。。
Viteを試したけれど、基本的なのしか入ってなくて他のライブラリ入れるのめんどくさいなぁ。。。
Vue のプロジェクトをすばやく構築したいなぁ。。。
そんなあなたに create-vue をご紹介！
create-vue って？
コマンドラインツールです。GitHub はこちら。
Vue のプロジェクトを簡単に立ち上げられます。
以下でプロジェクトの立ち上げ方を見ていきましょう！
環境
- windows10 home
- Node.js v16.13.0
- npm 8.1.0
手順
コマンドプロンプトを立ち上げてプロジェクトを立ち上げたいフォルダに移動して以下のコードを打ち込みます。ここではVue3のプロジェクトを立ち上げます。
npm init vue@3
すると以下のような画面が表示されるので、プロジェクト名を入力します。今回はプロジェクト名を vue-sample としています。
Vue.js - The Progressive JavaScript Framework
? Project name: » vue-sample
プロジェクト名を入力すると、対話形式でプロジェクトのセットアップを行っていきます。
√ Project name: ... vue-sample
√ 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 Cypress for End-to-End testing? ... No / Yes
√ Add ESLint for code quality? ... No / Yes
√ Add Prettier for code formatting? ... No / Yes
上から順に
- TypeScript を追加しますか？
- JSX をサポートしますか？
- SPA 開発のための Vue Router を追加しますか？
- 状態管理の Pinia を追加しますか？
- ユニットテストの Vitest を追加しますか？
- E2E テストの Cypress を追加しますか？
- ESLint を追加しますか？
- Prettier を追加しますか？
となりますので、自分の好きなように No/Yes を選んでセットアップしてください。
プロジェクトの作成が完了したら、作成したプロジェクトのフォルダに移ります。
cd vue-sample
以下のコマンドを打ち込みます。package.json に記述されている情報を元に node_modules にインストールします。
npm install
npm install について詳しく学びたい方はこちらをどうぞ。
以下のコマンドを打ち込みます。
npm run lint
以下のコマンドを打ち込んで、http://localhost:3000/ にアクセスしてみましょう。
npm run dev
このような画面が表示されれば成功です！Vue-CLI で実行するより早いですね！
ファイル構成
同じような構成のプロジェクトを Vue-CLI でもつくって、ファイル構成がどう違うのか見てみましょう。
作成したファイル構成はこちら。
√ Project name: ... vue-sample
√ Add TypeScript? ... Yes
√ Add JSX Support? ... No
√ Add Vue Router for Single Page Application development? ... Yes
√ Add Pinia for state management? / Yes
√ Add Vitest for Unit Testing? / Yes
√ Add Cypress for End-to-End testing? ... No
√ Add ESLint for code quality? ... Yes
√ Add Prettier for code formatting? / Yes
左がVue-CLI、右がcreate-vueです。
いろいろと違うところはありますね。
Vue-CLIではtestフォルダがsrcと同じ階層にありましたが、create-vueではsrc/componentsの中にあります。
ファイルの重さ
Vue-CLIとcreate-vueで同じような構成でプロジェクトを作ってみました。
| Vue-CLI | create-vue |
|---|---|
| 228 MB | 167 MB |
61MB違いますね。これはVue-CLIだと状態管理でVuexになりますが、create-vueではPiniaになるためだと考えられます。
Pinia と Vitest って？
Pinia
公式はこちら。
- Vue.js 向けの状態管理ライブラリ
- mutations がない。
- state の値を変更する場合は actions を使用する
- Vuedevtools をサポート
- Vuex と比べて軽い
などなど。
Vitest
公式はこちら。
2022 年 2 月 1 日現在、Vitest は開発中です。プロジェクトに組み込むときは注意してください。
- Vite を搭載した超高速のユニットテストフレームワーク
- ホットリロードでテストできる
- Chai、Jest も使える
などなど。
Vitestのほうがホットリロードあるし、テスト実行が速いです。
快適な開発を!
create-vue を使うことで簡単にプロジェクト立ち上げられました！
テストの実行方法とかは README に書いてあるので、そちらをご参照ください。
状態管理がVue-CLIだとVuexでcreate-vueだとPiniaだったり、create-vueではVitestを使っていたり、どちらを使うかは分かれると思います。
ただ、create-vueのVitestはまだ正式リリースされていないので、個人開発で遊ぶときに使うのがいいのかなと思います。
Vuetify が Vue3 に対応したら、Vuetify を入れてもっと使いたいなと思います。
ここまで読んでいただいてありがとうございました m(__)m