实验预计耗时：30 分钟

1. 课程背景

1.1 课程目的

本课程的主要目的是让学员通过学习掌握使用 Vue.js 编写前端页面并部署到服务器上的流程。在前端开发中实现登录页面是比较常见的需求，而 Vue.js 是目前比较受欢迎的前端开发框架，使用 Vue.js 能够更快捷地实现这一需求。

本课程将通过演示从使用 Vue CLI 构建 Vue 项目，使用 Vue.js 编写登录界面到将打包后的文件部署到 Linux 服务器上的完成流程，让学员在学习完本课程所有内容后能够独立完成一个前端项目的构建和部署。

1.2 课前知识准备

• 相关概念：
  • 腾讯云 CVM 云服务器：云服务器（Cloud Virtual Machine，CVM）是一种简单高效、安全可靠、处理能力可弹性伸缩的计算服务。腾讯云 CVM 允许选择多种操作系统来启动 CVM 实例，可以使用控制台、命令行或 SDK 等多种管理工具来启动、监控或终止 CVM 实例。本课程使用腾讯云服务器提供的公共镜像创建 Linux 实例，无需自己手动下载 Linux 镜像文件，网站将搭建在 Linux 实例上。
  • Nginx：Nginx 是一个高性能的 HTTP 和反向代理 web 服务器，用户可以通过在浏览器中访问 Nginx 的 IP 地址方式查看放入 Nginx 中的网页。
  • Vue.js：Vue 是一套用于构建用户界面的渐进式框架。Vue 的核心库只关注视图层，易于入门，也易于与其它库或已有项目整合。
  • Vue CLI：Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，确保了各种构建工具能够基于智能的默认配置即可平稳衔接。使用 Vue CLI 能够快速搭建一个 Vue 项目，这样可以减少配置，专注于编写代码。
  • Vue Router：Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，可以更简单地构建单页面应用。
  • Element UI：Element UI 是一套采用 Vue 2.0 作为基础框架实现的组件库，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库，提供了配套设计资源，帮助网站快速成型。
• 相关原理：
  • 实验原理：本实验使用 Node.js 的 npm 包管理器安装 Vue CLI，通过 Vue CLI 快速搭建 Vue 项目，将构建 Vue 项目后生成文件部署到 Linux 实例上的 Nginx 服务器上后，便可以通过 CVM 公网 IP 访问这些页面。