0

0

app.vue文件干啥的

青灯夜游

青灯夜游

发布时间:2022-12-23 13:50:13

|

8073人浏览过

|

来源于php中文网

原创

app.vue是vue页面资源的首加载项,是主组件,页面入口文件,所有页面都是在App.vue下进行切换的;app.vue负责构建定义及页面组件归集。app.vue文件的作用:1、一般就是指整个vue项目的根组件,用来展示组件中内容;2、App.vue是针对整个项目称作根组件,template下的子元素是针对当前的vue实例称作根组件。

app.vue文件干啥的

本教程操作环境:windows7系统、vue3版,DELL G3电脑。

app.vue是什么?有什么用?

app.vue是vue页面资源的首加载项,是主组件,页面入口文件,所有页面都是在App.vue下进行切换的;也是整个项目的关键,app.vue负责构建定义及页面组件归集。





app.vue中不但可以当做是网站首页,也可以写所有页面中公共需要的动画或者样式。不在上面写代码也可以。

立即学习前端免费学习笔记(深入)”;

app.vue是主组件,是页面入口文件,是vue页面资源的首加载项。所有的页面都是在app.vue中进行切换的。可以理解为所有的路由都是app.vue的子组件。

app.vue的作用

1、App.vue文件一般就是指整个vue项目的根组件,用来展示组件中内容。

2、App.vue是针对整个项目称作根组件,template下的子元素是针对当前的vue实例称作根组件。

main.js,App.vue,index.html之间的关系

在初始化的Vue项目中,我们最先接触到的就是main.js,App.vue,index.html这三个文件,我们从培训视频或者官方文档上可以了解到:

app.vue文件干啥的

index.html---主页,项目入口

App.vue---根组件

main.js---入口文件

那么这几个文件之间的联系如何呢?

1.先看index.html中的内容:(为了很好的标识各个文件,我对各文件进行了文字标记)

2.在App.vue中,我做了如下处理:

MTTSHOP包包免费商城系统
MTTSHOP包包免费商城系统

一款非常包包、衣服、鞋子类网站,页面干净清洁、一目了然,mttshop打造精致、简单、易用、免费的商城。 系统要求:IIS5.1以后,必须安装.net 3.5 安装步骤: 1、下载完成后,直接解压文件mttshop.rar 2、附加数据库:解压后的可以找一个叫db的文件夹,解压后直接附加就可以,支持SQL 2000、2005、2008 3、配置web.config文件,找到key=&qu

下载

3.在main.js中,文件初始内容如图:

那么我们打卡的网页如何呢?

网页效果如下:

也就是说,在网页的Title部分,加载了index.html中定义的Title,而在正文部分,加载了App.vue中定义的部分。(但是需要注意的是,在浏览器打开的瞬间,浏览器中正文部分会瞬间显示index.html中定义的正文部分

那么,我们就可以来分析上述的逻辑了,浏览器访问项目,最先访问的是index.html文件,

而index.html中

来自index.html正文中的内容

 上面有一个id为app的挂载点,之后我们的Vue根实例就会挂载到该挂载点上

 main.js作为项目的入口文件,在main.js中,新建了一个Vue实例,在Vue实例中,通过

new Vue({  el: '#app',
  //components: {App },
  //template: ''
})

告诉该实例要挂载的地方;(即实例装载到index.html中的位置

接着,实例中注册了一个局部组件App,这个局部组件App来自于哪儿呢?

import App from './App.vue'new Vue({
  //el: '#app',  components: {App },
  //template: ''
})

这个局部组件是当前目录下的App.vue;

而起模板是什么呢?模板就是组件App.vue中的template中的内容。(template会替代原来的的挂载点处的内容)

 所以Vue这个实例就是战士的是App.vue这个组件的内容

 所以,我们进行总结:在项目运行中,main.js作为项目的入口文件,运行中,找到其实例需要挂载的位置,即index.html中,刚开始,index.html的挂载点处的内容会被显示,但是随后就被实例中的组件中的模板中的内容所取代,所以我们会看到有那么一瞬间会显示出index.html中正文的内容。

而index.html中的Title部分不会被取代,所以会一直保留。

【相关推荐:vuejs视频教程web前端开发

相关专题

更多
C++ 单元测试与代码质量保障
C++ 单元测试与代码质量保障

本专题系统讲解 C++ 在单元测试与代码质量保障方面的实战方法,包括测试驱动开发理念、Google Test/Google Mock 的使用、测试用例设计、边界条件验证、持续集成中的自动化测试流程,以及常见代码质量问题的发现与修复。通过工程化示例,帮助开发者建立 可测试、可维护、高质量的 C++ 项目体系。

8

2026.01.16

java数据库连接教程大全
java数据库连接教程大全

本专题整合了java数据库连接相关教程,阅读专题下面的文章了解更多详细内容。

31

2026.01.15

Java音频处理教程汇总
Java音频处理教程汇总

本专题整合了java音频处理教程大全,阅读专题下面的文章了解更多详细内容。

14

2026.01.15

windows查看wifi密码教程大全
windows查看wifi密码教程大全

本专题整合了windows查看wifi密码教程大全,阅读专题下面的文章了解更多详细内容。

42

2026.01.15

浏览器缓存清理方法汇总
浏览器缓存清理方法汇总

本专题整合了浏览器缓存清理教程汇总,阅读专题下面的文章了解更多详细内容。

6

2026.01.15

ps图片相关教程汇总
ps图片相关教程汇总

本专题整合了ps图片设置相关教程合集,阅读专题下面的文章了解更多详细内容。

9

2026.01.15

ppt一键生成相关合集
ppt一键生成相关合集

本专题整合了ppt一键生成相关教程汇总,阅读专题下面的的文章了解更多详细内容。

6

2026.01.15

php图片上传教程汇总
php图片上传教程汇总

本专题整合了php图片上传相关教程,阅读专题下面的文章了解更多详细教程。

2

2026.01.15

phpstorm相关教程大全
phpstorm相关教程大全

本专题整合了phpstorm相关教程汇总,阅读专题下面的文章了解更多详细内容。

4

2026.01.15

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Vue 教程
Vue 教程

共42课时 | 6.5万人学习

Vue3.x 工具篇--十天技能课堂
Vue3.x 工具篇--十天技能课堂

共26课时 | 1.4万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号