Vue.js · 1 min read · Oct 30, 2025
Ubuntu 22.04にVue.JSをインストールする方法
Vue.jsは、インタラクティブなユーザーインターフェースとシングルページアプリケーションを作成するために使用されるJavaScriptフレームワークです。AngularJSフレームワークよりも軽量で適応性があります。シンプルで柔軟、モジュール式で、高性能で、学習が容易であり、アプリケーション開発を容易にする多くのツールやライブラリを提供します。基本的なHTML、CSS、およびJavaScriptを知っていれば、Vue.jsを使用して迅速にWebアプリケーションを構築できます。
このガイドでは、Ubuntu 22.04にVue JSをインストールする方法を説明します。
前提条件
- HAProxy用のUbuntu 22.04を実行しているサーバー。
- すべてのサーバーにルートパスワードが設定されています。
Node.jsのインストール
始める前に、サーバーにNode.jsをインストールする必要があります。デフォルトでは、Ubuntu 22.04のデフォルトリポジトリには最新のNode.jsバージョンは含まれていません。したがって、Nodeソースリポジトリからインストールする必要があります。
まず、次のコマンドを使用して必要な依存関係をインストールします：
apt install curl gnupg2 gnupg git wget -y次に、次のコマンドを使用してNodeソースリポジトリを追加します：
curl -fsSL https://deb.nodesource.com/setup_lts.x | bash -リポジトリが追加されたら、次のコマンドを使用してNode.jsをインストールできます：
apt install nodejs -yNode.jsがインストールされたら、次のコマンドを使用してNode.jsのバージョンを確認できます：
node --version次の出力が得られます：
v16.16.0
次に、次のコマンドを使用してNPMを最新バージョンに更新します：
npm install npm@latest -g次のコマンドを使用してNPMのバージョンも確認できます：
npm --version次の出力が得られるはずです：
8.13.2
Vue CLIのインストール
次に、次のコマンドを使用してNPMを使用してVue CLIパッケージをインストールできます：
npm install -g @vue/cliVueがインストールされたら、次のコマンドを使用してVue JSのバージョンを確認できます：
vue --version次の出力が表示されるはずです：
@vue/cli 5.0.8
Vue JSでシンプルなアプリを作成する
これで、Vue CLIを使用してアプリケーションを簡単に作成できます。次のコマンドを実行して、myappという名前のサンプルアプリケーションを作成します。
vue create myapp次の出力が得られます：
Vue CLI v5.0.8
? Creating project in /root/myapp.
???? Initializing git repository...
?? Installing CLI plugins. This might take a while...
added 848 packages, and audited 849 packages in 24s
88 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
???? Invoking generators...
???? Installing additional dependencies...
added 95 packages, and audited 944 packages in 6s
98 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
? Running completion hooks...
???? Generating README.md...
???? Successfully created project myapp.
???? Get started with the following commands:
$ cd myapp
$ npm run serve
WARN Skipped git commit due to missing username and email in git config, or failed to sign commit.
You will need to perform the initial commit yourself.
次に、myappディレクトリに移動し、次のコマンドを使用してすべてのインストールされたファイルとディレクトリをリストします：
cd myapp
ls次の出力が得られます：
babel.config.js jsconfig.json node_modules package.json package-lock.json public README.md src vue.config.js
Vue JSアプリケーションの開始
次のコマンドを実行して、Vue JSアプリケーションを開始できます：
npm run serveアプリケーションが開始されると、次の出力が得られます：
> [email protected] serve
> vue-cli-service serve
INFO Starting development server...
DONE Compiled successfully in 6469ms 8:45:33 AM
App running at:
- Local: http://localhost:8080/
- Network: unavailable
Note that the development build is not optimized.
To create a production build, run npm run build.
Vue JS Webインターフェースにアクセス
この時点で、Vue JSアプリケーションがインストールされ、ポート8080でリッスンしています。今すぐWebブラウザを開き、URL http://your-serevr-ipを使用してVue JSアプリケーションにアクセスできます。次のページにVue JSダッシュボードが表示されるはずです：
結論
この記事では、Ubuntu 22.04にVue JSをインストールする方法を説明しました。これで、Vue JSフレームワークを使用してシングルページアプリケーションの構築を開始できます。質問があればお気軽にお尋ねください。
新しい投稿を受信箱で受け取る
スパムはありません。いつでも購読を解除できます。