.jpg)
.jpg)
.jpg)
.jpg)
在前后端分离的项目，我们将其部署在了 华为云耀云服务器 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
可以看到运行成功，然后我们在浏览器打开前端访问的地址。
进入浏览器后，可以看到前端的项目运行成功，现在需要验证钱后端的项目是否连接成功。我们默认账号登录进入系统。
可以看到已经成功登录进入了系统，现在我们需要测试后端的接口个功能是否正常，我们点击添加用户，添加一个用户。
点击确认。
系统显示登录成功，然后我们需要在华为云的 数据库 里面查看，这一条数据是否添加到了华为 云数据库 中。
打开数据库后，可以看到用户表中已经添加的新账号，至此，我们的前后端分离项目已经运行成功，接下来，我们来将项目打包发布在华为云数据库中。
