本页内容

• 准备工作
• 安装 Node.js
• 安装 Vue CLI
• 使用 Vue JS 创建一个简单应用
• 启动 Vue JS 应用
• 访问 Vue JS Web 界面
• 结语

Vue.js 是一个用于创建交互式用户界面和单页应用程序的 JavaScript 框架。它比 AngularJS 框架更轻量、更具适应性。它简单、灵活、模块化、性能高效、易于学习，并提供许多便于应用开发的工具和库。如果你掌握了基本的 HTML、CSS 和 JavaScript，就可以快速开始使用 Vue.js 构建 Web 应用。

本指南将介绍如何在 Ubuntu 22.04 上安装 Vue JS。

准备工作

• 一台运行 Ubuntu 22.04 的服务器（本文以 HAProxy 为例）。
• 所有服务器均已配置 root 密码。

安装 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 -y

Node.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/cli

Vue 安装完成后，可以使用以下命令验证 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 框架构建自己的单页应用程序。如果你有任何疑问，欢迎向我提问。