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

冷不防 2023-10-13 22:53 116阅读 0赞

![968f4c3a9001403aaa609f4e85ac2933.gif][]

###  ###

*  一、项目文件
 *   *  1.1 目录结构
     *  1.2 结构介绍
 *  二、执行过程
 *   *  2.1 main.js
     *  2.2 App.vue
     *  2.3 index.html
 *  三、生命周期
 *   *  3.1 周期阶段
     *  3.2 Vue实例的产生过程
     *  3.3 钩子函数用途

# 一、项目文件 #

## 1.1 目录结构 ##

![在这里插入图片描述][9ad17484a4544e07b0073fb6faf1f2f9.png]

## 1.2 结构介绍 ##

<table> 
 <thead> 
  <tr> 
   <th>文件结构</th> 
   <th>文件介绍</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>node_modules</td> 
   <td>第三方包文件夹</td> 
  </tr> 
  <tr> 
   <td>public</td> 
   <td>放html文件的地方</td> 
  </tr> 
  <tr> 
   <td>favicon.ico</td> 
   <td>默认的网站图标</td> 
  </tr> 
  <tr> 
   <td>index.html</td> 
   <td>模板文件</td> 
  </tr> 
  <tr> 
   <td>src</td> 
   <td>存放代码的文件夹</td> 
  </tr> 
  <tr> 
   <td>assets</td> 
   <td>存放静态资源的文件夹</td> 
  </tr> 
  <tr> 
   <td>components</td> 
   <td>组件文件夹</td> 
  </tr> 
  <tr> 
   <td>App.vue</td> 
   <td>主组件</td> 
  </tr> 
  <tr> 
   <td>main.js</td> 
   <td>入口文件,打包或运行的时候,所运行的第一个文件</td> 
  </tr> 
  <tr> 
   <td>.gitignore</td> 
   <td>用于设置哪些文件被git忽略的配置文件</td> 
  </tr> 
  <tr> 
   <td>babel.config.js</td> 
   <td>babel的配置文件</td> 
  </tr> 
  <tr> 
   <td>jsconfig.json</td> 
   <td>js核心库的配置文件</td> 
  </tr> 
  <tr> 
   <td>package-lock.json</td> 
   <td>依赖包的下载地址文件</td> 
  </tr> 
  <tr> 
   <td>package.json</td> 
   <td>项目配置文件,里面会有项目名称、版本号、scripts和依赖包等</td> 
  </tr> 
  <tr> 
   <td>README.md</td> 
   <td>项目说明文件</td> 
  </tr> 
  <tr> 
   <td>vue.config.js</td> 
   <td>vue-cli的配置文件</td> 
  </tr> 
 </tbody> 
</table>

# 二、执行过程 #

## 2.1 main.js ##

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

![在这里插入图片描述][b467bfe1ec074b0a920b510a933d0b48.png]

//引入Vue
    import { createApp } from 'vue'
    
    //引入App组件,它是所有组件的父组件
    import App from './App.vue'
    
    //创建Vue的实例对象->vm
    //将App组件放入容器中
    createApp(App).mount('#app')

## 2.2 App.vue ##

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

![在这里插入图片描述][954d3799a9da4a69b0c175313c6d7524.png]

<template>
      <img alt="Vue logo" src="./assets/logo.png">
      <HelloWorld msg="Welcome to Your Vue.js App"/>
    </template>
    
    
    <script>
    import HelloWorld from './components/HelloWorld.vue'
    
    export default {
      name: 'App',
      components: {
        HelloWorld
      }
    }
    </script>
    
    
    <style>
    #app {
      font-family: Avenir, Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-align: center;
      color: #2c3e50;
      margin-top: 60px;
    }
    </style>

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

## 2.3 index.html ##

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

![在这里插入图片描述][58e4d62ee9e74d828512db3da75457e8.png]

<!DOCTYPE html>
    <html lang="">
      <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <link rel="icon" href="<%= BASE_URL %>favicon.ico">
        <title><%= htmlWebpackPlugin.options.title %></title>
      </head>
      <body>
        <noscript>
          <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
        </noscript>
    
        <div id="app"></div>
        
      </body>
    </html>

1. <meta http-equiv="X-UA-Compatible" content="IE=edge">，针对IE浏览器的特殊配置,让IE浏览器以最高的渲染级别渲染页面 
     2. <meta name="viewport" content="width=device-width,initial-scale=1.0">，开启移动端的理想视口
     3. <link rel="icon" href="<%= BASE_URL %>favicon.ico">，配置页签图标,使用BASE_URL即可访问到public文件夹下的素材,避免使用[./],因为部署在服务器上后有各种各样的问题会出现
     4. <title><%= htmlWebpackPlugin.options.title %></title>，配置网页标题,这是webpack里面的一个插件,会自动去package.json中找到name节点的值设置为页面标题
     5. <noscript>标签， 如果当前使用的浏览器不支持JS,那么页面就会渲染noscript标签里面的内容
     6. <div id="app"></div>，容器

# 三、生命周期 #

> 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。

![在这里插入图片描述][48333c86299f4128babc6e8663093ccd.png]

## 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 实例之前调用，可以用于处理一些收尾工作。

[968f4c3a9001403aaa609f4e85ac2933.gif]: https://img-blog.csdnimg.cn/968f4c3a9001403aaa609f4e85ac2933.gif
[9ad17484a4544e07b0073fb6faf1f2f9.png]: https://img-blog.csdnimg.cn/9ad17484a4544e07b0073fb6faf1f2f9.png
[b467bfe1ec074b0a920b510a933d0b48.png]: https://img-blog.csdnimg.cn/b467bfe1ec074b0a920b510a933d0b48.png
[954d3799a9da4a69b0c175313c6d7524.png]: https://img-blog.csdnimg.cn/954d3799a9da4a69b0c175313c6d7524.png
[58e4d62ee9e74d828512db3da75457e8.png]: https://img-blog.csdnimg.cn/58e4d62ee9e74d828512db3da75457e8.png
[48333c86299f4128babc6e8663093ccd.png]: https://img-blog.csdnimg.cn/48333c86299f4128babc6e8663093ccd.png