Vue｜项目结构与执行过程介绍

一、项目文件

1.1 目录结构

1.2 结构介绍

二、执行过程

2.1 main.js

该文件是整个项目的入口文件，当在控制台执行npm run serve时，随后来到src目录找到main.js，在main.js中，首先引入vue，然后引入App父组件，它是所有组件的父组件。

//引入Vue
import { createApp } from 'vue'

//引入App组件,它是所有组件的父组件
import App from './App.vue'

//创建Vue的实例对象->vm
//将App组件放入容器中
createApp(App).mount('#app')
1
2
3
4
5
6
7
8
9

2.2 App.vue

接下来找到App.vue，它由页面模板、页面脚本、页面样式组成，其中引入了HelloWorld.vue，它默认首字母以及第二个单词首字母大写，大驼峰命名法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

1. App.vue 是一个vue组件，这个组件中包含三部分内容：1.页面模板（template）；2.页面脚本（script）；3.页面样式（style）
2. 页面模板中，定义了页面的 HTML 元素
3. 页面脚本主要用来实现当前页面数据初始化、事件处理等等操作
4. 页面样式就是针对 template 中 HTML 元素的页面美化操作

2.3 index.html

index.html 是项目的首页，入口页，也是整个项目唯一的HTML页面

  
    
    
    
    
    
  
  
    

    

    
  


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

 1. ，针对IE浏览器的特殊配置,让IE浏览器以最高的渲染级别渲染页面 
 2. ，开启移动端的理想视口
 3. ，配置页签图标,使用BASE_URL即可访问到public文件夹下的素材,避免使用[./],因为部署在服务器上后有各种各样的问题会出现
 4. ，配置网页标题,这是webpack里面的一个插件,会自动去package.json中找到name节点的值设置为页面标题
 5. 

三、生命周期

Vue 实例从创建到销毁的过程，就是生命周期。从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、销毁等一系列过程，称之为 Vue 的生命周期。

3.1 周期阶段

vue生命周期有11个，8个常见的阶段：1、beforeCreate（创建前）；2、created（创建后）；3、beforeMount（载入前）；4、mounted（载入后）；5、beforeUpdate（更新前）；6、updated（更新后）；7、beforeDestroy（销毁前）；8、destroyed（销毁后）；后三个不常用阶段：；9、activated；10、deactivated；11、errorCaptured。

3.2 Vue实例的产生过程

1. beforeCreate 在实例初始化之后，数据观测和事件配置之前被调用。
2. created 在实例创建完成后被立即调用。
3. beforeMount 在挂载开始之前被调用。
4. mounted el被新创建的vm.$el替换，并挂载到实例上去之后调用该钩子。
5. beforeUpdate 数据更新时调用，发生在虚拟DOM打补丁之前。
6. updated 由于数据更改导致的虚拟DOM重新渲染和打补丁，在这之后会调用该钩子。
7. beforeDestroy 实例销毁之前调用。
8. destroyed 实例销毁后调用

3.3 钩子函数用途

每一个钩子函数在特定的阶段执行，可以利用不同钩子函数的特性，实现不同的功能。

1. created函数是最早可以获取到 data数据的钩子，可以发送 ajax 异步请求，向后台请求数据。
2. mounted函数是数据已经挂载到模板中了，但是data数据一旦更新就会使虚拟DOM重新渲染页面，也是可以发送 ajax 异步请求，向后台请求数据。
3. beforeDestroy函数时是在销毁 Vue 实例之前调用，可以用于处理一些收尾工作。