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

本文详细解析了Vue项目中main.js如何导入并挂载App.vue组件,以及webpack如何打包引入到index.html。重点在于理解组件注册和页面结构的关系。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

        最近使用Vue提供的官方CLI和构建工具webpack生成VUE项目,对于其中的main.js,App.vue,index.html这三文件之前的关系有点疑惑,一番探究后,记录如下。希望对刚学习Vue的小伙伴有所帮助。


一,首先App.vue比较简单,就是一个单文件组件,组件名‘App’。(单文件组件,不明白小伙伴可以看看vue的官方文档)

二,接下来就是main.js,这里贴关键代码分析 

import Vue from 'vue'
import App from './App'

new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
})
  1. import App from './App'   将组件App被引入了main.js中。
  2. el:'#app'  将vue实例挂载到#app (即id=‘app’的dom元素,index.html中定义的app)
  3. components: { App }   局部注册 App组件
  4. template: '<App/>'   使用字符串模板'<App/>'代替el中挂载的元素,这样<App/>组件就替换掉了index.html中id='app'的元素。

三,index.html中是怎么引入main.js文件的呢(这是我之前最疑惑的地方)

  查了资料才知道,是构建工具webpack的功劳。

  当我们bulid的时候构建工具将所有的 js,组件打包成一个独立的js文件,引入到index.html中。在npm run dev 的时候,可以通过浏览器开发人员工具调式代码看出来。

四,最后总结

      

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值