华为云服务器+前后端分离项目部署-中

在前后端分离的项目，我们将其部署在了华为云耀云服务器L实例上，在上一期的教程中，我们成功的部署了后端项目，并启动了后端服务，现在我们需要启动前端的服务。

启动一个基于Vue.js的前端应用通常涉及以下步骤：

1. 安装Node.js和npm：首先，确保你的计算机上安装了Node.js和npm（Node包管理器）。你可以在Node.js官方网站上下载和安装它们：https://nodejs.org/

2. 安装Vue CLI（可选）：Vue CLI是一个用于创建和管理Vue.js项目的官方工具。你可以使用以下命令全局安装Vue CLI：

   “`

   npm install -g @vue/cli

   “`

   这将在全局范围内安装Vue CLI，以便你可以在任何地方使用它。

3. 创建Vue项目：使用Vue CLI，你可以轻松创建一个新的Vue项目。进入你想要创建项目的目录，并运行以下命令：

   “`

   vue create my-vue-app

   “`

   这将提示你选择一些配置选项，例如是否使用Babel、TypeScript等，选择适合你项目的选项后，Vue CLI会创建一个新的Vue项目。

4. 进入项目目录：使用cd命令进入你的Vue项目目录：

   “`

   cd my-vue-app

   “`

5. 启动开发服务器：在项目目录中运行以下命令以启动开发服务器：

   “`

   npm run serve

   “`

   这将启动一个本地开发服务器，并在终端中显示访问你的应用程序的URL（通常是http://localhost:8080）。

6. 打开浏览器：使用你喜欢的Web浏览器访问上面显示的URL，你应该能够看到你的Vue.js应用程序运行在本地开发服务器上。

7. 开始开发：现在，你可以在项目目录中的src目录中找到Vue.js组件，并编辑它们以构建你的应用程序。当你保存文件时，开发服务器将自动重新加载应用程序，以便你可以立即查看更改。

这就是启动一个Vue.js前端应用程序的基本流程。从这里开始，你可以根据你的项目需求添加更多的组件、路由、状态管理等功能。如果你选择使用Vue CLI，它还提供了许多工具和插件，可以帮助你更轻松地开发和构建Vue应用程序。

接下来，我们需要启动前端的服务，使用vs code打开前端项目的代码。

这个文件夹即为前端的项目文件夹，打开之后使用vs code运行。

可以看到整个前端项目的文件目录，然后我们需要安装一些依赖包。

安装成功，然后我们需要运行项目。

找到package.json文件，里面包含项目运行的指令。

然后运行npm run dev

可以看到运行成功，然后我们在浏览器打开前端访问的地址。

进入浏览器后，可以看到前端的项目运行成功，现在需要验证钱后端的项目是否连接成功。我们默认账号登录进入系统。

可以看到已经成功登录进入了系统，现在我们需要测试后端的接口个功能是否正常，我们点击添加用户，添加一个用户。

点击确认。

系统显示登录成功，然后我们需要在华为云的数据库里面查看，这一条数据是否添加到了华为云数据库中。

打开数据库后，可以看到用户表中已经添加的新账号，至此，我们的前后端分离项目已经运行成功，接下来，我们来将项目打包发布在华为云数据库中。