Vue中main.js、App.vue和index.html

最新推荐文章于 2024-08-07 20:34:45 发布
最新推荐文章于 2024-08-07 20:34:45 发布
阅读量5.5k 收藏 51
点赞数 9
分类专栏： Vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42275614/article/details/113973978
版权

初始化的Vue项目的时候，最先接触到的就是main.js，App.vue，index.html这三个文件。

main.js是入口文件，主要作用是初始化vue实例，并引入所需插件

App.vue是主组件，所有页面都是在App.vue下进行切换，可以理解为所有的路由都是App.vue的子组件

index.html是页面的入口文件，里面包含一个id为app挂载点，main.js中定义的Vue根实例就会挂载到该挂载点上

打开网页的时候，页面Title是index.html中定义的Title，而正文部分是App.vue中定义的内容。但在打开的瞬间是会显示index.html里面的内容（如果定义了的话）

<!DOCTYPE html>
<html>
  <head>
    <!-- <meta base="/trade-service/"> -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <!-- <script src="./sysconfig.js"></script> -->
    <!-- 跳过 favicon.ico 请求 -->
    <link rel="icon" href="da
最低0.47元/天 解锁文章
可爱的黑山样
关注
专栏目录
vue项目中app.vue 、main.js和 index.html的关联
kangkang_style的博客
03-21 1859
1. main.js是入口文件，主要作用是初始化vue实例并使用需要的插件。 2. App.vue是主组件，所有页面都是在App.vue下进行切换的。 3. main.js中的根实例会挂载到index.html中的<div id="app"> 4. index.html文件入口 5. src放置组件和入口文件 6. node_modules为依赖...
vue项目分析--index.html+main.js+App.vue关系,前端路由的使用
weixin_46045444的博客
10-11 3426
main.js引入文件 https://www.cnblogs.com/chenleideblog/p/10484554.html https://blog.csdn.net/bujiongdan/article/details/81416100 app.vue是一个根组件，main.js 是一个入口文件，index.html是项目入口 index.html有的时候放在public文件夹下 app.vue里实际上就是定义了一个可以操作的vue模板区域，export default实际上就是把这个根组件暴露出
前端学习——main.js和App.vue 和 index.html的关系
qq_33453797的博客
12-02 1387
从这里就可以看出，index.html文件和App.vue文件是没有直接关系的，而其之间的关系是通过main.js文件进行关联的，在main.js文件中，实例化vue对象时，使用el也就是标签选择器，把App.vue和index.html的div节点进行关联。这时把index.html文件的id=app 改为了id=app1，这时再看页面，只显示了 我是index.html ，这时就明白了，index.html文件和app.vue是通过id=app这个东西进行关联的。如果有关系，它们是怎么关联的？
vue项目中,main.js,App.vue,index.html的调用方法
10-17
今天小编就为大家分享一篇vue项目中,main.js,App.vue,index.html的调用方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue3学习笔记第一天
最新发布
Word_seeker的博客
08-07 1932
Vue是一种用于构建用户界面的JavaScript框架。MVVM 是Vue采用的一种软件架构模式，用于构建交互式的用户界面。）：模型代表应用程序的数据和业务逻辑。在MVVM模式中，模型通常不直接与视图交互，而是由ViewModel层进行中介。视图是用户直接与之交互的界面。它通常是用户界面的可视化部分，如网页中的HTML页面或移动应用中的屏幕。视图模型是视图的抽象层，它负责处理视图的展示逻辑和用户交互。视图模型通常包含了视图所需的数据和命令，并且负责向视图暴露方法和属性。
main.js, App.vue, index.html关系
a493556721的专栏
08-23 2007
1.main.js import Vue from 'vue' import App from './App' ...... new Vue({ //挂载到index.html的&lt;div id="app"&gt; el: '#app', //router对象，包含路由信息 router, //在该根实例中注册App.vue中的App组件 components:...
Vue项目入口文件main.js和App.vue和index.html之间的关系
FurtherSkyQ的博客
04-08 9836
刚开始接触Vue，说实话对Vue的运行逻辑其实不是很清楚，更多的是比较模糊，今天就先记录下Vue项目在初始化时做了做了什么。 1、在初始化的Vue项目中，我们最先接触到的就是main.js，App.vue，index.html这三个文件： index.html---主页，项目入口 App.vue---根组件 main.js---入口文件 那么这几个文件之间的联系如何呢？ 1.先看index.html中的内容：（为了很好的标识各个文件，我对各文件进行了文字标记） 2.在App.vu.
vue项目中mian.js与App.vue简述及两者之间的关系
broeg的博客
05-10 2951
vue项目中，mian.js与App.vue简述及两者之间的关系
Vue中index.html、main.js、App.vue、index.js之前的关系及加载过程
wangshiqi666的博客
03-26 4223
Vue项目结构
详谈Vue.js框架下main.js,App.vue,page/index.vue之间的区别
10-14
本文将深入探讨Vue.js项目中三个关键文件：main.js、App.vue和page/index.vue之间的区别。 首先，让我们从项目结构说起。一个标准的Vue.js项目通常有以下部分： 1. **index.html** - 这是项目的入口文件，它通常...
关于Vue中main.js，App.vue，index.html之间关系进行总结
weixin_30332705的博客
03-06 1294
在初始化的Vue项目中，我们最先接触到的就是main.js，App.vue，index.html这三个文件，我们从培训视频或者官方文档上可以了解到： index.html---主页，项目入口 App.vue---根组件 main.js---入口文件 那么这几个文件之间的联系如何呢？ 1.先看index.html中的内容：（为了很好的标识各个文件，我对各文件进行了文字标记） ...
【vue】index.html main.js app.vue index.js怎么结合的？ 怎么打包的？搜集的信息
08-14 309
转载：https://blog.csdn.net/yudiandemingzi/article/details/80247137 怎么结合的： 一、启动项目 第一步：cmd进入项目文件里，运行npm run dev 启动项目 这里说明启动端口号是8080 第二步：往页面输入：localhost:8080...
Vue-Cli脚手架文件main.js、App.vue、index.html、index.js详解
weixin_30603633的博客
06-17 2227
最近在学习Vue，学习Vue必定离不开vue-cli脚手架的运用，这里给大家梳理一下vue-cli的相关文件以及其调用关系。 话不多说，直接上图（笔者从网上找的） 使用到vue项目的文件包括一个.html，两个.js，两个.vue文件，关系如上图所示 1、index.xml为vue项目默认首页，里面默认引用了app.vue根组件 2、main.js为vue项目的入口文件，加...
总结Vue中index.html、main.js、App.vue、index.js之间关系以及Vue项目加载流程
夜飘凌的博客
05-14 8830
总结Vue中index.html、main.js、App.vue、index.js之间关系以及Vue项目加载流程 文章目录总结Vue中index.html、main.js、App.vue、index.js之间关系以及Vue项目加载流程1 vue中index.html、main.js、App.vue、index.js关系简介1.1 项目的运行入口index.html1.2 入口文件main.js1.3 根组件App.vue1.4 控制路由index.js2 Vue项目加载流程 1 vue中index.html
vue项目入门——index.html和App.vue
阿常的博客
04-02 2801
讲解vue项目入门——index.html和App.vue这两个文件
app.vue main.js index.html 的详细说明
m0_69057918的博客
12-07 551
app.vue main.js index.html 的详细说明
Vue项目中index.html、main.js与App.vue关系
javaxampp的博客
11-03 367
index.html: 这里面的<div id="indexHtmlOfApp"></div>就是即将要挂载vue组件的地方，页面加载时，首先会加载index.html页面，即使区域中有元素，也会被App.vue组件里的元素所替换 App.vue: App.vue是根组件，id是app，所有的组件都可以在此之下定义，通过路由进行跳转页面 main.js 连接了index.html和App.vue的桥梁， import App from './App' import rout
vue中main.js，App.vue，index.html，index.js之间关系进行总结
wfly blog
10-23 1775
index.html 项目的运行入口，在body体中只有一个div标签，其id为app，这个id将会连接到src/main.js内容 在浏览器打开的瞬间，浏览器中正文部分会瞬间显示index.html中定义的正文部分 上面有一个id为app的挂载点，之后我们的Vue根实例就会挂载到该挂载点上 <!DOCTYPE html> <html> <head> ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值