Zenn
🍚

create-vueでVueプロジェクトを作成してみる

2022/03/05に公開
Vue.js
Vue 3
Pinia
Vitest
tech

Vueのプロジェクトを立ち上げる時はvue-cliが一般的でした。
ですが、vue-cliのGitHubのREADME.mdを見てみると、この記事を書いている2022年3月5日現在、vue-cliはメンテナンスモードになっています。
「Vue3のプロジェクトを立ち上げる時にはcreate-vueを使用してください。」とのことなのでcreate-vueを使ってみようと思います。

環境やバージョン

  • windows10 home
  • Node.js v16.13.0
  • npm 8.1.0

create-vueのインストール

create-vueのGitHubはこちら。
コマンドプロンプトを起動します。
vue3のプロジェクトを立ち上げるためのフォルダを作成します。今回はフォルダ名をvue-create-sampleとしました。フォルダを作成できたら、cd vue-create-sampleを打ち込んで作成したフォルダに移動します。

mkdir vue-create-sample
cd vue-create-sample

次に以下のコマンドを打ちこみます。create-vue @ 3のパッケージをインストールしてよいか聞かれるので、yを入力します。

npm init vue@3

作成するプロジェクト名を聞かれます。プロジェクト名はvue-create-sampleにしました。

? Project name: » vue-create-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 を追加しますか？
  • となります。

以下の画面が表示されるので、cd vue-create-sample、npm install、npm run lint、npm run devを打ち込んでいきます。

Done. Now run:

  cd vue-create-sample
  npm install
  npm run lint
  npm run dev

npm run devを打ち込んだら、http://localhost:3000/ を開いてみてください。以下の画面が表示されたら成功です。

Piniaについて

PiniaのGitHubはこちら。
公式サイトはこちら。
vue-cliでは状態管理でVuexが使われていました。create-vueではPiniaが推奨されているようです。PiniaはVuexの後継になります(PiniaのGitHubのFAQより)。
VuexとPiniaを比べて変わったところは、

  • TypeScriptがフルサポートされた
  • mutationsが廃止された
  • ファイルサイズが軽くなった
    などがあげられます。

他にもありますので、ぜひこちらの記事をご覧ください。

Vitestについて

create-vueのGitHubはこちら。
公式サイトはこちら。

VitestはVite環境で動作する高速テストフレームワークです。
Vitestについてはこちらの記事で詳しく説明してくださっているので、ぜひご覧ください。記事ではReactで試していますが、Jestとの比較などもされています。

終わりに

create-vueの環境を構築しました。
vue-cliよりも高速でプロジェクトを立ち上げられるし、サーバーの起動は早いし、状態管理はやりやすくなるし、良い点が多いと感じました。テストフレームワークが開発中なので、正式リリースされるのが待ち遠しいです。

PS

間違いや修正点ありましたら、ご連絡いただけますと幸いです。

Discussion