先后顺序:

index.html > App.vue的export外的js代码 > main.js > App.vue的export里面的js代码 > Index.vue的export外的js代码

测试的页面代码块:

文件的加载先后顺序:

Index.vue的mounted()中的输出没有执行。why?

--------------------------------------------------------------------------------------------------------------------------

每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的,所以我们试下延迟创建新的Vue实例的情况下加载的顺序。

这里主要修改的是App.vue和main.js的代码,index.html和Index.vue主要是添加执行的时间:

index.html   >  App.vue的export外的js代码   >    main.js调用公共函数外的代码  >   App.vue公共函数的定时器外的代码   >  main.js调用公共函数内创建实例前的代码  >  App.vue的export里面的js代码  >  main.js调用公共函数内创建实例后的代码  >  App.vue公共函数的定时器内执行回调函数后的代码  >   Index.vue的export外的js代码

可以看到创建实例的前后,中间执行了一次App.vue中的mounted内的代码

vue项目中主要文件的加载顺序(index.html、App.vue、main.js)的更多相关文章

  1. vue项目中主要文件的加载顺序(index.html、main.js、App.vue)

    todo: https://www.cnblogs.com/xifengxiaoma/p/9493544.html https://www.cnblogs.com/stella1024/p/10563 ...

  2. Java之——Web项目中DLL文件动态加载方法

    本文转自:https://blog.csdn.net/l1028386804/article/details/53903557 在Java Web项目中,我们经常会用到通过JNI调用dll动态库文件来 ...

  3. vue项目中实现图片懒加载的方法

    对于图片过多的页面,为了加速页面加载速度,所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载, 等到滚动到可视区域后再去加载.这样子对于页面加载性能上会有很大的提升,也提高了用户体验. 实 ...

  4. Vue项目中实现图片懒加载

    个人网站 https://iiter.cn 程序员导航站 开业啦,欢迎各位观众姥爷赏脸参观,如有意见或建议希望能够不吝赐教! ---对于图片过多的页面,为了加速页面加载速度,所以很多时候我们需要将页面 ...

  5. Vue项目中的文件/文件夹命名规范

    Vue项目中的文件/文件夹命名规范 0.2262018.09.21 16:01:09字数 820阅读 6979 文件或文件夹的命名遵循以下原则: index.js 或者 index.vue,统一使用小 ...

  6. vue项目中一些文件的作用

    原文 简书原文:https://www.jianshu.com/p/38749e5bec3c 大纲 1.vue项目结构 2.主要的配置文件 2.1.package.json 2.2.dev-serve ...

  7. vue项目实现路由按需加载的3种方式

    vue异步组件技术 ==== 异步加载vue-router配置路由 , 使用vue的异步组件技术 , 可以实现按需加载 .但是,这种情况下一个组件生成一个js文件 /* vue异步组件技术 */ { ...

  8. WEB相关文件的加载顺序

    一. 1.启动一个WEB项目,WEB容器会先去读取它的配置文件web.xml,读取<context-param>和<listener>两个节点. 2.接着,容器创建一个Serv ...

  9. <context-param> 标签引出的 web.xml 文件的加载顺序 [转]

    代码示例 : <context-param> <param-name>contextConfigLocation</param-name> <param-va ...

随机推荐

  1. laravel和lumen数据库链接错误_FatalErrorException Call to a member function connection

    FatalErrorException in Model.php line 3339: Call to a member function connection() on null 挺简单的一个lum ...

  2. 使用struts2框架后的拦截器

    过滤特殊字符的过滤器 struts2会在web.xml中配置如下的过滤器: <filter> <filter-name>struts</filter-name> & ...

  3. 茶杯头开枪ahk代码

    ;说明这个工具是为了茶杯头写的,F1表示换枪攻击,F3表示不换枪攻击,F2表示停止攻击. $F1::loop{ GetKeyState, state, F2, Pif state = D{break ...

  4. Percona XtraBackup使用说明(转)

    Percona XtraBackup使用说明 转载出自: https://blog.csdn.net/wfs1994/article/details/80396604 XtraBackup介绍 Per ...

  5. vue-cli 第一章

    一.安装 Node.Python.Git.Ruby 这些都不讲解了   二.安装 Vue-Cli    # 最新稳定版本 # 全局安装 npm install --global vue-cli # 创 ...

  6. squid 透明代理配置

    阿铭在教程中已经介绍过squid的安装和配置,http://study.lishiming.net/chapter22.html 教程中只介绍了初级的正向代理和反向代理,这篇文档将要介绍透明代理如何配 ...

  7. ubuntu18.04修改ssh登录欢迎信息

    1.编辑文件 ll /etc/update-motd.d/* 2.修改文件 3.查询效果 run-parts /etc/update-motd.d

  8. (PMP)第4章-----项目整合管理

    4.1 制定项目章程 输入 工具与技术 输出 1.商业文件 (商业论证,效益管理计划) 1.专家判断 1.项目章程 2.协议 2.数据收集 (头脑风暴,焦点小组,访谈) 2.假设日志 3.事业环境因素 ...

  9. JAVA 8 主要新特性 ----------------(五)Lambda方法引用与构造器引用

    一.Lambda方法引用 当要传递给Lambda体的操作,已经有实现的方法了,可以使用方法引用!(实现抽象方法的参数列表,必须与方法引用方法的参数列表保持一致!) 方法引用: 使用操作符 “::” 将 ...

  10. 排序算法 (sorting algorithm)之 冒泡排序(bubble sort)

    http://www.algolist.net/Algorithms/ https://docs.oracle.com/javase/tutorial/collections/algorithms/ ...