安装前端框架Vue3

现在我们已经完成了电影列表页和详情页的两个接口，但是还没有看到页面。本节课开始，我们先来认识一下前端框架Vue3，然后通过它来生成前端页面。

我们可以在浏览器地址栏中输入：

www.vuejs.org

进入官方网址。Vue的官方网站提供了中文版，方便不擅长英语的用户阅读。Vue的特点是易学易用，性能出色，适合丰富的web前端开发。

它由中国人尤雨溪及其他活跃团队成员共同维护，因此对中国用户非常友好，提供了完整的中文文档。本教程以实战为目的，不会讲解Vue框架的每一个知识点，而是以实用为核心，讲解我们用到的内容。如果想进一步深入学习Vue，可以参考官方文档。

首先，我们来看一下如何安装Vue。在官网上，我们点击安装按钮，如下图所示：

我们可以选择不同的安装方式，其中推荐使用Node.js进行安装。因此，我们先来安装Node.js。在浏览器中输入

www.nodejs.org

点击下载后进入到node.js各个版本下载页面，如下图所示：

大家选择适合自己操作系统的版本进行下载和安装。安装都是傻瓜式的安装，这里就不在赘述了，安装完成后，我们可以在终端（windows系统使用cmd进入终端）中输入node --version来确认Node.js的版本。当前版本为V18.17.0如下图所示：

Node.js安装完成后，我们可以使用NPM命令来安装Vue。NPM是一个包管理工具，类似于Python中的pip。由于NPM的下载速度较慢，我们可以配置国内淘宝镜像来提高下载速度。在终端输入：

npm config set registry https://registry.npm.taobao.org

然后，我们可以安装CNPM来替代NPM，接下来我们安装CNMP在终端输入：

npm install -g cnpm --registry=https://registry.npm.taobao.org

接下来我们安装最新版的Vue CLI。我们在终端输入：

cnpm install -g @vue/cli

安装完成后，我们在终端输入vue --version来确认Vue CLI的版本。

接下来，我们将使用它来创建项目，我们希望在DRF项目下创建一个前端应用。因此，我们首先在vscode终端中点击加号添加新的终端控制台，如下图所示：

然后创建Vue项目。项目的路径将在DRF项目的同级目录下，即与我们的后端项目dx_movie目录平级。我们将创建一个名为frontend的前端应用，在终端使用命令

vue create frontend

创建时，有三种方式可供选择，默认选择vue3、默认选择vue2和手动安装。如下图所示：

我们选择手动安装方式，按向下箭头选择最后一项，然后按回车键。在选择安装选项时，我们选择了Babel和Router。按下空格键选择，再按一下则取消选择。然后，按下Babel，Router被选中。vuex和CSS选中。一共选中4个，如下图所示：

选择完成后，按下Enter键，选择vue3版本，再次按下确认键。在最后的提示中，我们选择了Y，如下图所示：

接下来选择第一个Sass/SCSS (with dart-sass)，回车，如下图所示：

接下来还是选择第一个In dedicated config files，回车。接下来我们选择n，不保存。安装成功如下图所示：

安装完成后，我们将会在右侧看到一个名为Frontend的新文件夹，其中包含许多文件。

接下来，我们按照提示在终端中进入Frontend目录，在vscode终端中输入：

cd frontend
pnpm run serve

并执行命令npm run serve来启动服务。在启动服务后，我们会收到一个包含local和network的信息，其中local是本地的网址。如下图所示：

我们复制这个local地址，在浏览器中地址栏输入http://localhost:8080/打开，会看到Vue框架的首页以及一个关于页面。如果您也看到了这样的页面，那么恭喜您，安装成功了。