Categories: Vue3

【Vue入門】Viteによるプロジェクトの作成

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がオススメ!同僚に差をつけよう!

issiki_wp

Share
Published by
issiki_wp