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

  • [アーティクル]

Linux 用 Windows サブシステム (WSL) に Vue.js Web フレームワークをインストールすることにより、Windows 上に Vue.js 開発環境をセットアップするためのガイドです。 詳細については、「Vue.js の概要」のページを参照してください。

Vue は、Windows に直接または WSL にインストールできます。 通常、NodeJS バックエンドとの連携を計画し、Linux 実稼働サーバーでの再利用が必要な場合、または Bash コマンドを利用するチュートリアルに従うことを計画している場合は、WSL にインストールすることをお勧めします。 Vue.js の代替として Vite を検討することもできます。

前提条件

  • Linux ディストリビューション (Ubuntu など) を含む Linux 用 Windows サブシステム (WSL) をインストールし、WSL 2 モードで実行されていることを確認します。 これは PowerShell を開き、「wsl -l -v」と入力することによって確認できます。
  • WSL 2 上に Node.js をインストールします。これには、バージョン マネージャー、パッケージ マネージャー、Visual Studio Code、および Remote Development 拡張機能が含まれます。 Node Package Manager (npm) は、Vue.js のインストールに使用されます。

重要

WSL を使用して Linux ディストリビューションをインストールすると、ファイルを格納するためのディレクトリが作成されます\\wsl\Ubuntu-20.04 (Ubuntu-20.04 が、使用している Linux ディストリビューションに置き換えられます)。 Windows エクスプローラーでこのディレクトリを開くには、WSL コマンド ラインを開き、cd ~ を使用してホーム ディレクトリを選択します。次に、explorer.exe . コマンドを入力します。マウントされた C ドライブ (/mnt/c/Users/yourname$) で使用するファイルをインストールしたり保存したりしないように注意してください。 そのようにすると、インストールとビルドにかかる時間が大幅に長くなります。

Vue.js のインストール

WSL に Vue.js をインストールするには:

  1. WSL コマンドライン (Ubuntu) を開きます。

  2. 新しいプロジェクト フォルダーを作成し (mkdir VueProjects)、そのディレクトリに移動します (cd VueProjects)。

  3. Node Package Manager (npm) を使用して Vue.js をインストールします。

npm install vue

vue --version コマンドを使用して、インストールしたバージョン番号を確認します。

注意

NPM ではなく CDN を使用して Vue.js をインストールするには、Vue.js のインストールに関するドキュメントを参照してください。

Vue CLI のインストール

Vue CLI は、ターミナル/ コマンド ラインで Vue を操作するためのツールキットです。 これにより、新しいプロジェクトをすばやくスキャフォールディングしたり (vue create)、新しいアイデア をプロトタイプ化したり (vue serve)、グラフィカル ユーザー インターフェイスを使用してプロジェクトを管理したり (vue ui) することができます。 Vue CLI は、ビルドの複雑な処理の一部 (Babel や Webpack の使用など) を実行する、グローバルにインストールされる npm パッケージです。 新しいシングルページ アプリをビルドしない場合は、Vue CLI は必要ではないことがあります。

Vue CLI をインストールするには、npm を使用します。 アップグレードするには (vue upgrade --next)、次のように -g フラグを使用してグローバルにインストールする必要があります。

npm install -g @vue/cli

追加できるプラグイン (graphql を統合するためのリンティングや Apollo など) の詳細については、Vue CLI のドキュメントで Vue CLI プラグインに関するページを参照してください。

その他のリソース