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

最新推荐文章于 2024-04-02 18:46:41 发布

原创最新推荐文章于 2024-04-02 18:46:41 发布 · 2.9k 阅读

CC 4.0 BY-SA版权

文章标签：

1 篇文章

订阅专栏

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

最近使用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/>'
})

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

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

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

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