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


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

App.vue--根组件

main--入口文件

三者之间的关系如何:

1、先看index.html中的内容

而index.html中:

来自index.html正文的内容

 上面有一个id为app的挂载点,之后创建的Vue根实例就会挂载到这个挂载点上

2、App.vue的内容如下:

 App.vue文件是根组件,主要作用是在main.js中,把它作为根组件挂载到index.html文件的div元素上

 3、main.js的内容如下:

 main.js文件是App主文件,是Vue3的入口文件,主要作用是创建Vue的App并引入所需要的插件

说明实例应装载到index.html中的位置:

createApp(App).use(store).use(router).mount('#app')

运行结果是:

网页的Title部分,加载了index.html中定义的Title,而正文部分加载了App.vue中定义的部分,(在浏览器打开的瞬间,浏览器的正文部分会瞬间显示index.html中定义的正文部分)

总结:在项目运行中,main.js作为项目的入口文件,运行中找到其实例需要挂载的位置,即index.html中,刚开始,index.html的瓜子啊点处的内容会被显示,但随后被实例中的组件中的模板中的内容所取代,而index,html中的Title部分不会被取代,会一直保留

vue