VUE 程序的执行过程(非常非常重要)

在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 devyarn dev时,构建工具会自动处理main.js文件的引入和依赖关系。构建过程会将main.js文件作为入口文件,并递归地打包所有依赖的文件。

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

相关推荐
重铸码农荣光12 分钟前
CSS 也能“私有化”?揭秘模块化 CSS 的防坑指南(附 Vue & React 实战)
前端·css·vue.js
alamhubb29 分钟前
反感pnpm的全链路污染?可以了解下这个对原项目零侵入,零修改完全兼容npm的monorepo工具
前端·javascript·node.js
2501_948194981 小时前
RN for OpenHarmony AnimeHub项目实战:正在热播页面开发
javascript·react native·react.js
2501_944521001 小时前
rn_for_openharmony商城项目app实战-语言设置实现
javascript·数据库·react native·react.js·harmonyos
AdleyTales1 小时前
vscode识别不了@提示找不到路径解决
前端·javascript·vscode
前端九哥1 小时前
装个依赖把公司电脑干报废了?npm i 到底背着我干了啥?
前端·javascript
绝世唐门三哥2 小时前
工具函数-精准判断美东交易时间
前端·javascript·vue.js
松涛和鸣2 小时前
DAY52 7-Segment Display/GPIO/Buttons/Interrupts/Timers/PWM
c语言·数据库·单片机·sqlite·html
踢球的打工仔2 小时前
typescript-null和undefined
前端·javascript·typescript
前端小蜗2 小时前
对不起,我很贱:老板还没催,我自己就统计《GitLab年度代码报告》
前端·javascript·人工智能