Vue3 前端从青铜到黄金王者 #14 - vue-cli-service（下）serve 使用

2024-02-11 15:35:36

前言

在上一篇文章中，我们解析了 Vue3 项目的构成并修改了组件的代码。现在，我们继续学习 Vue3 中的 vue-cli-service 的 serve 命令，包括热更新、代理、启动 Vue3 项目、调试、开发工具、服务端渲染、构建、打包和部署等内容，帮助您更深入地理解和使用 Vue3。

热更新

热更新是指在不刷新页面的情况下，当您修改了组件或样式文件时，浏览器会自动重新加载这些文件。这使得开发过程更加高效，因为您不必每次修改代码后都手动刷新页面。

要在 Vue3 中启用热更新，您需要在 package.json 文件中添加以下配置：

{
  "scripts": {
    "serve": "vue-cli-service serve"
  },
  "devDependencies": {
    "@vue/cli-service": "^5.0.0"
  }
}

然后，您可以使用以下命令启动热更新服务：

npm run serve

当您修改了组件或样式文件时，浏览器会自动重新加载这些文件。

代理

代理是指将请求从一个服务器转发到另一个服务器。这通常用于在开发环境中将请求转发到后端服务器。

要在 Vue3 中配置代理，您需要在 vue.config.js 文件中添加以下配置：

module.exports = {
  devServer: {
    proxy: {
      '/api': 'http://localhost:3000'
    }
  }
};

这样，当您在浏览器中访问 /api 路径时，请求将被转发到 http://localhost:3000。

启动 Vue3 项目

要在 Vue3 中启动项目，您可以使用以下命令：

npm run serve

这将启动一个开发服务器，并在浏览器中打开项目。

调试

要在 Vue3 中调试项目，您可以在浏览器中打开开发工具，然后点击 "Sources" 选项卡。您可以在此选项卡中看到项目的源代码，并设置断点。

当您在源代码中设置断点时，当执行到达断点时，代码将停止执行。这允许您检查变量的值并逐步执行代码。

开发工具

Vue3 提供了一些开发工具，可以帮助您更轻松地开发项目。这些工具包括：

Vue Devtools: Vue Devtools 是一个浏览器扩展，可以帮助您检查 Vue3 项目的状态。您可以使用 Vue Devtools 来检查组件树、数据状态和事件。
Vue CLI: Vue CLI 是一个命令行工具，可以帮助您创建和管理 Vue3 项目。您可以使用 Vue CLI 来生成组件、路由和视图。
Vetur: Vetur 是一个 Visual Studio Code 扩展，可以帮助您编写 Vue3 代码。Vetur 提供了代码自动完成、错误检查和格式化等功能。

服务端渲染

服务端渲染是指在服务器上生成 HTML 并将其发送给浏览器。这使得页面加载速度更快，因为浏览器不需要解析 JavaScript 代码就可以显示页面。

要在 Vue3 中启用服务端渲染，您需要在 package.json 文件中添加以下配置：

{
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
  "devDependencies": {
    "@vue/cli-service": "^5.0.0"
  }
}

然后，您可以使用以下命令生成静态 HTML 文件：