次の方法で共有


Linux 用 Windows サブシステムに Vue.js をインストールする

Windows Subsystem for Linux (WSL) で Vue.js 開発環境を設定するためのガイド。 背景については、Vue.js の 概要を参照してください。

Vue は、Windows または WSL に直接 インストールできます。 Node.js バックエンドと対話する場合、Linux サーバーにデプロイする場合、または Bash コマンドを使用するチュートリアルに従う場合は、WSL をお勧めします。

[前提条件]

  • WSL 2 モードで実行されている Linux ディストリビューション (Ubuntu など) を含む、Windows Subsystem for Linux (WSL) をインストールします。 wsl -l -v で確認する:
  • WSL 2に Node.js をインストールする: これには、バージョン マネージャー、パッケージ マネージャー、Visual Studio Code、リモート開発拡張機能が含まれます。

重要

マウントされた Windows ドライブ (~/projects) ではなく、WSL ファイルシステム (/mnt/c/ など) 内にプロジェクト ファイルを格納します。 ファイルシステムの境界を越えて作業すると、インストールとビルドの時間が大幅に遅くなります。

Vue プロジェクトを作成する

新しい Vue 3 プロジェクトを開始するには、 npm create vue@latestすることをお勧めします。この方法では、公式の Vite ベースのスキャフォールディング ツールである create-vue を使用します。

  1. WSL ターミナル (Ubuntu など) を開きます。

  2. プロジェクト ディレクトリに移動します。

    mkdir -p ~/projects
    cd ~/projects
    
  3. 新しい Vue プロジェクトを作成します。

    npm create vue@latest
    

    インストーラーによって、プロジェクトに名前を付け、オプションの機能 (TypeScript、JSX サポート、Vue ルーター、Pinia 状態管理、Vitest、ESLint) を選択するように求められます。

  4. プロジェクト フォルダーに移動し、依存関係をインストールして、開発サーバーを起動します。

    cd <your-project-name>
    npm install
    npm run dev
    

    アプリは http://localhost:5173で利用できるようになります。

その他のリソース