Vue执行流程

在上一节课中，我们安装了Vue，并使用命令生成了一个名为Frontend的Vue前端项目。让我们来看一下当前的目录结构。dx_Movie是我们的后端项目，其中包含所有的DRF代码；而与前端相关的文件都位于Frontend文件夹内。本节课的主题是介绍Vue的执行过程，为什么启动服务后就能看到页面呢？我们先来了解一下。当我们启动服务时，它会执行一个入口文件。这个入口文件位于Frontend/src目录下，名为main.js。在main.js中，我们从Vue中导入createApp方法，用于创建Vue实例应用。然后导入了名为app.vue的根组件、Router对象和用于状态管理的仓库store。最后一行代码表示创建一个app应用，使用了Router和store，并将其挂载到app上。如下图所示：

我们来看一下app的位置，在public目录下有一个index.html文件，其中有一个id为app的标签，我们将生成的应用挂载到这里。如下图所示：

接下来，我们结合网站来看，当我们在浏览器中输入127.0.0.1:8080时，就会看到一个页面。如下图所示：

这个页面的位置在我们的项目中，在main.js文件中，我们导入了一个Router，对应着src/Router，并自动加载了index.js。在创建路由时，如果有一个斜杠，那么当前的网址就相当于在斜杠后面加了一个斜杠，它们是等价的。因此当前执行的是homeview。如下图所示：

如果要切换到about页面，只需修改为/about，页面就会发生跳转，因为它执行的是aboutview。代码如下图：

在views文件夹中，我们执行home组件，组件名为homeview，它是从views下的homeview导入的，类似于我们的视图。如下图所示：

在html中，我们只有一个表头，具体的内容需要挂载到id为app的页面上。在Vue中，使用了template标签，它是Vue的独有语法。接下来是一个class为home的标签，以及一张图片，图片是logo图片。然后浏览器页面是一堆内容，如下图所示：

在代码中和其相关代码只有一行，是因为它引用了一个组件hello world。这个组件是从components下的hello world.vue文件中导入的。代码如下：

HelloWorld.vue文件代码截图如下：

再来看一下template标签中的msg变量，它是从父类传递的变量，类似于Django模板中的变量传递。接着是具体的内容，例如“for a guide”浏览器页面的内容都在HelloWorld.vue。script标签中是js代码，而style标签中是文本样式，用于写css代码。如下图所示：

当我们访问127.0.0.1:8080，如果点击about，url就会切换为/about，如下图所示：

此时会执行src/views/aboutview.vue文件，如下图所示：