Ubuntu20.04にVueCLIをインストールする方法

Ubuntu20.04にVueCLIをインストールする方法

この記事では、Ubuntu20.04にVueCLIをインストールする方法について説明します。

Vue.jsは、オープンソースのmodel–view–viewmodelフロントエンドJavaScriptフレームワークです。この記事では、インストールプロセスとHello WorldFirstプロジェクトの作成について説明します。

前提条件

  • Ubuntu20.04にインストールされた専用サーバーまたはKVMVPS。
  • rootユーザーアクセスまたは管理者権限を持つ通常のユーザー。

Ubuntu20.04にVueCLIをインストールします

1-サーバーを最新の状態に保つ

# apt update -y

2-NodeJSをダウンロードする

NodeJSの最新の安定したリリースをダウンロードします。

# curl -sL https://deb.nodesource.com/setup_15.x | sudo -E bash -

3-NodeJSをインストールします

次に、次のコマンドを使用してNodeJSをインストールします。

# apt-get install -y nodejs

4-インストールを確認します

# node -v && npm -v

出力:

v15.9.0
7.5.4

5. VueCLIをインストールします

次のコマンドはVueCLIをインストールします。

# npm install -g @vue/cli

インストールを確認します。

# vue --version

出力:

@vue/cli 4.5.11

6.Vueプロジェクトを作成します

# vue create hello-world

プリセットを選択するように求められます。基本的なBabel + ESLintセットアップに付属するデフォルトのプリセットを選択するか、[手動で機能を選択]を選択して必要な機能を選択できます。

出力:

Vue CLI v4.5.11
? Please pick a preset: (Use arrow keys)
❯ Default ([Vue 2] babel, eslint)
Default (Vue 3 Preview) ([Vue 3] babel, eslint)
Manually select features

プロジェクトhello-worldが正常に作成されました。
次のコマンドを開始します。

# cd hello-world
# npm run serve

出力:

App running at:
- Local: http://localhost:8080/
- Network: http://192.168.0.106:8080/

Note that the development build is not optimized.
To create a production build, run npm run build.

ブラウザに移動して、http:// [server_IP]:8080を開きます。

Ubuntu20.04にVueCLIをインストールする方法

それでおしまい。インストールが完了しました。

この記事では、Ubuntu20.04にVueCLIをインストールする方法を見てきました。