Zenn
🌊

Vue3 + Vite + JavaScript でプロジェクト作成

2024/10/18に公開
JavaScript
Vue.js
Vue 3
Vite
インストール
tech

はじめに

Vue CLI から Vite に移行することにしました。噂の通り Vite はとても速いです！タイトルは「Vue3 + Vite + JavaScript でプロジェクト作成」としましたが恐らく Vue や JavaScript 以外も同じです。

環境

  • Ubuntu Server
  • Node v22.9.0
  • npm

プロジェクト作成手順

  1. プロジェクトの作成
    $ npm create vite@latest
    後は画面に従ってプロジェクト名 (この例では「your_project_name」) やフレームワーク (この例では 「Vue」)、Variant (この例では「JavaScript」)を決定してください。
  2. 依存パッケージのインストール
    your_project_name は先に決定したプロジェクト名に変えて実行してください。
    $ cd your_project_name
$ npm install
  3. 開発用サーバの起動
    $ npm run dev
    表示された URL にアクセスすると Hello World のページが表示されます。
    このままではローカルからしかアクセスできないので外部からアクセスしたい場合は package.json の "dev": "vite" の部分を "dev": "vite --host" に変更してください。その他のオプションは参考文献[3]に書いてあって分かりやすいです。

参考文献

[1] はじめに

[2] Unable to access react-vite app on mobile

[3] コマンドラインインターフェイス

Discussion