首页 前端知识 Vue|项目结构与执行过程介绍

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

2024-02-05 11:02:00 前端知识 前端哥 46 509 我要收藏

  • 一、项目文件
    • 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 目录结构

在这里插入图片描述

1.2 结构介绍

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

二、执行过程

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')

2.2 App.vue

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

在这里插入图片描述

<!-- 结构 -->
<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页面

在这里插入图片描述

<!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>
    <!-- built files will be auto injected -->
  </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。

在这里插入图片描述

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 实例之前调用,可以用于处理一些收尾工作。
转载请注明出处或者链接地址:https://www.qianduange.cn//article/1358.html
标签
评论
发布的文章

Web10--jQuery进阶

2024-02-19 09:02:46

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!