VUE 程序的执行过程（非常非常重要）

最新推荐文章于 2024-07-23 08:20:25 发布

一顿操作猛如虎，啥也不是！

最新推荐文章于 2024-07-23 08:20:25 发布

阅读量2.1k

点赞数 2

文章标签： vue.js javascript html

本文链接：https://blog.csdn.net/Sayesan/article/details/132664458

版权

本文解释了Vue.js中index.html和main.js的加载及执行顺序：首先加载index.html，然后引入并执行main.js，其中main.js创建Vue实例并挂载根组件。Webpack和VueCLI构建工具自动处理依赖关系，即使在index.html中未直接引用main.js。

摘要由CSDN通过智能技术生成

在Vue.js应用程序中，`index.html`和`main.js`的执行顺序是：

1. 首先，浏览器加载`index.html`文件。
2. 在`index.html`文件中，通过`<script>`标签引入了`main.js`文件。
3. 当浏览器遇到`<script>`标签时，它会停止解析HTML，下载JavaScript文件，并将执行权交给JavaScript引擎。
4. `main.js`文件被加载并执行。
5. 在`main.js`文件中，创建了Vue实例并挂载到页面上。
6. `App.vue`文件作为Vue应用程序的根组件，被包含在`main.js`中创建的Vue实例中，并通过`new Vue({...}).$mount('#app')`语句挂载到指定的DOM元素上。

因此，可以说`index.html`文件是整个Vue应用程序的入口点，而`main.js`文件是Vue应用程序的入口文件。在浏览器加载和执行的过程中，`index.html`和`main.js`的先后顺序是先加载`index.html`，然后引入并执行`main.js`文件。

在Vue.js中，main.js文件是显式引入的，不需要在index.html文件中引用。在现代前端构建工具（如Webpack）的帮助下，构建过程中会自动处理这些依赖关系。

在Vue CLI创建的项目中，当你运行npm run dev或yarn dev时，构建工具会自动处理main.js文件的引入和依赖关系。构建过程会将main.js文件作为入口文件，并递归地打包所有依赖的文件。

因此，尽管在index.html文件中没有直接引用main.js，但实际上它是在构建过程中被引入和使用的