Ubuntu 22.04 Vue.js 開発環境 – npm / Vue CLI / Vite の位置づけを整理する

この記事の位置づけ

Ubuntu 22.04 上に Vue.js の開発環境を用意するための補足記事です。サーバー構築そのものではなく、開発用 VM や検証環境でフロントエンドの動作確認を行う場面を想定しています。

Vue.js はフロントエンド UI を構築するための JavaScript フレームワークです。Ubuntu 22.04 上で Vue.js を扱う場合、まず Node.js / npm を使える状態にして、その上でプロジェクト作成やビルド用のツールを導入します。

以前は @vue/cli をグローバルインストールして使う構成がよくありました。現在の新規プロジェクトでは Vite を使う構成が主流になっているため、Vue CLI は既存プロジェクトや当時の検証手順を再現するための選択肢として見るのが自然です。

先に npm をインストールしておきます。Ubuntu 標準パッケージで導入した Node.js / npm を使う場合は、バージョンがプロジェクト要件を満たしているか確認します。

既存プロジェクトや Vue CLI 前提の手順を確認する場合は、npm から @vue/cli を導入します。グローバルインストールになるため、開発用 VM や検証環境に限定して扱う方が安全です。

sudo npm install -g @vue/cli
vue --version

新規の Vue.js プロジェクトでは、Vue CLI よりも Vite を使う構成が一般的です。グローバルインストールせず、プロジェクト作成時に npm から実行できます。

npm create vue@latest
cd <project-name>
npm install
npm run dev

実際のプロジェクト名や選択する機能は対話的に決めます。サーバー上で常時動かすというより、開発端末や検証 VM で起動して動作確認する用途です。

古い Vue.js の記事では Vue CLI を前提にすることがありますが、現在の Vue 開発では Vite を使う構成が一般的です。この記事では Ubuntu 22.04 上で npm を使い、Vue CLI と Vite の位置づけを確認します。

既存プロジェクトを保守する場合は Vue CLI、新規作成や軽量な検証では Vite、というように分けて考えると整理しやすくなります。

ストーリーで覚える Linux CLI 入門

Linux のコマンドライン操作を基礎から確認したい場合の参考書籍です。価格や在庫はリンク先で確認してください。

このリンクは Amazon アソシエイトリンクです。

Ubuntu 22.04 Vue.js 開発環境 – npm / Vue CLI / Vite の位置づけを整理する