Viteを利用するには特にインストール作業は必要ありません。
プロジェクトの作成
プロジェクト名を「sample_app」にする場合は以下のコマンドを実行します。
npmコマンド
// npm init vite-app プロジェクト名
npm init vite-app sample_vite_app
作成が完了するとコンソールが以下のようになります。プロジェクト名と同名のフォルダ「sample_vite_app」が作成されます。
js
PS C:\Users\testuser\OneDrive\IT\Javascript\Vue3> npm init vite-app sample_vite_app
Need to install the following packages:
create-vite-app
Ok to proceed? (y) y
npm WARN deprecated create-vite-app@1.21.0: create-vite-app has been deprecated. run `npm init @vitejs/app` or `yarn create @vitejs/app` instead.
Scaffolding project in C:\Users\testuser\OneDrive\IT\Javascript\Vue3\sample_vite_app...
Done. Now run:
cd sample_vite_app
npm install (or `yarn`)
npm run dev (or `yarn dev`)
以下のコマンドを実行します。
コマンド
cd sample_vite_app
npm install
プロジェクトの実行
以下のコマンドを実行します。
ブラウザでhttp://localhost:3000/
にアクセスすると、表示されます。
コマンド
npm run dev
プロジェクトの終了
プロジェクトを終了したいときはコンソール内でctrl + c
を入力します。
プロジェクトのビルド
- ビルドコマンドは
Vue CLI
と同じです。 - 公開用のファイル群がdistフォルダ内に生成されます。
npmコマンド
npm run build
以上で記事の解説はお終い!
HTML、CSS、JavaScriptをもっと勉強したい方にはUdemyがオススメ!同僚に差をつけよう!