如何通过宝塔面板运行 Vue 项目使用 yarn run serve
在这篇文章中，我们将学习如何在宝塔面板上运行一个 Vue.js 项目，特别是通过使用 yarn run serve 命令。以下将为你详细解释这个过程，包括流程步骤、每一步所需的命令以及相应的代码说明。
流程步骤
首先，我们需要明确整个过程的步骤。我们可以将这个过程分成以下几个部分：
| 步骤 | 描述 |
|---|---|
| 1 | 安装 Node.js 和 Yarn |
| 2 | 安装 Vue CLI |
| 3 | 创建新的 Vue 项目 |
| 4 | 在宝塔面板中配置项目 |
| 5 | 使用 yarn run serve 启动项目 |
每一步的详解
1. 安装 Node.js 和 Yarn
在开始之前，确保你的服务器上已经安装了 Node.js 和 Yarn。这是因为 Vue.js 项目是基于 Node.js 的，而 Yarn 是一个流行的包管理工具。
安装 Node.js
在你的服务器上运行以下命令来安装 Node.js：
# 使用 NodeSource 的 PPA 安装 Node.js
curl -sL | sudo -E bash -
sudo apt-get install -y nodejs
上述代码将 Node.js 安装到你的服务器上。我们使用了 Version 16 的源，你可以根据需求修改为其他版本。
安装 Yarn
接下来，安装 Yarn：
# 安装 Yarn
sudo npm install -g yarn
该命令将在你的机器上全局安装 Yarn。
2. 安装 Vue CLI
接下来，我们需要安装 Vue CLI：
# 全局安装 Vue CLI
sudo npm install -g @vue/cli
这个命令允许你在终端中使用 vue 命令来创建新的 Vue.js 项目。
3. 创建新的 Vue 项目
使用 Vue CLI 创建新的 Vue 项目：
# 创建一个新的 Vue 项目
vue create my-project
在命令执行过程中，系统会提示你选择模版，选择你需要的配置。创建后，请切换到项目目录：
cd my-project
4. 在宝塔面板中配置项目
宝塔面板是一个方便的服务器管理工具，接下来需要在宝塔面板上进行设置：
- 登录到宝塔面板。
- 点击“网站”选项，然后选择“添加站点”。
- 填写站点信息（如域名、FTP等），选择创建。
- 在你的站点目录中上传你的 Vue 项目，通常情况下，项目位于
/www/wwwroot/my-project。 - 配置好网站的运行环境，确保 Node.js 被启用。
5. 使用 yarn run serve 启动项目
在项目目录下，确认你的配置信息一切就绪后，可以使用以下命令启动项目：
# 在项目目录中启动 Vue 项目
yarn run serve
这个命令会启动你的 Vue 开发服务器，会提示你查看URL（通常是 http://localhost:8080），通过此链接可以访问你的应用。
ER 数据模型
接下来，我们用 ER 图来展示项目的基本数据结构。用 Mermaid 语法来表示。
erDiagram
PROJECT {
string id PK "项目 ID"
string name "项目名称"
string description "项目描述"
string version "项目版本"
}
USER {
string id PK "用户 ID"
string username "用户名"
string password "密码"
string role "角色"
}
PROJECT ||--o| USER : "创建"
结尾
通过以上步骤，你已经成功地在宝塔面板上运行了一个 Vue.js 项目，使用了 yarn run serve 命令。记得在开发环境中进行实际测试，在上线前请确保环境配置和代码的安全性。如果在实施过程中遇到任何问题，请及时查找相关文档或请求支持。祝你在前端开发的旅程中顺利！
