pnpm + Vite + Vue + TypeScript で新規プロジェクトを作成する

npm と比べて早いと話題の pnpm を使用してプロジェクトを新規作成したので備忘録として残します。
こちら に公式が発表しているベンチマークの結果があります。
npm や yarn との違いはこちらの記事が分かりやすくてオススメです。

node.js のバージョンを確認

現在使用している Node.js のバージョンが 12 以上か？の確認を行います。

> node -v
v16.4.2

pnpm を新規インストール

npm を使用し pnpm のインストールを行います。

> npm install -g pnpm

これで、pnpm のインストールが完了しました！

新規プロジェクトの作成

pnpm の create-vite コマンドを使い新規プロジェクトを作成します。

> pnpx create-vite

コマンドを実行後、create-vite@latest をインストールしますか？と聞かれますので Y を選択しインストールを実行します。

? Install the following package: create-vite@latest? (Y/n) » true

インストール後、作成する新規プロジェクトのプロジェクト名を設定するので hello-pnpm-vite と入力します。

? Project name: >> hello-pnpm-vite

続いて使用するフレームワークを決めます。
Vue を使用しますので vue を選択してください。

√ Project name: ... hello-pnpm-vite
? Select a framework:  » - Use arrow-keys. Return to submit.
    vanilla
>   vue
    react
    preact
    lit-element
    svelte

使用するフレームワーク選択後は、使用する Vue は JavaScript または、TypeScript どちらを使用するか？を聞かれますので、 TypeScript でプロジェクトを作成したい為 vue-ts を選択します。

√ Project name: ... hello-pnpm-vite
√ Select a framework: » vue
? Select a variant: » - Use arrow-keys. Return to submit.
>   vue
    vue-ts

お疲れ様です！
プロジェクトの作成は終了です！

作成したプロジェクトを実行

ディレクトリーの階層を作成したプロジェクトにします。

> cd hello-pnpm-vite

node_modules のインストールを行います。

> pnpm install

作成したプロジェクトを実行します。

> pnpm dev

コンソール上に、localhost の向き先が表示されれば成功です。

  vite v2.4.4 dev server running at:

  > Local: http://localhost:3000/
  > Network: use `--host` to expose

  ready in 237ms.

ブラウザで表示されている localhost:3000 へアクセスします。

作成したプロジェクトをビルド

プロジェクトのビルドをします。

> pnpm build

実行後、dist フォルダが生成されていれば成功です！