关于vue的运行原理问题

Question

想请教大家一个问题，之前跟着别人依葫芦画瓢写了两个项目和一些小demo了，基本掌握了一些基本的语法 API啥的 但是最近突然想到一个问题，就是完全不知道vue的运行机制和原理 比如说当运行一个vue应用的时候 先加载的哪些文件 后加载哪些文件 主要加载了哪些文件 对应功能是什么 还有就是明明没有在index.html里引入app.js，但是项目运行起来后 打开控制台显示通过script引入的app.js 这是怎么实现的呢 好蒙！

Answer 1

源码：
vue应用的源码大部分是基于vue的 语法糖, 其语言的定义也是由框架本身制定的，（相信大部分人应该不会用纯js的方式去编码），正如react有jsx的语法糖，.vue文件本身在浏览器里面是不能正常识别的，浏览器内核正常情况下只识别类似于js，html，css等有官方定义的标准语言，那如何才能让浏览器读懂.vue呢，其实处理方式就是先把.vue的语法转译成纯js，在vue的体系内，正常都是用vue-loader的 webpack loader来处理成javascript（正如jsx语法则是用 babel 来做处理。

1:先加载的哪些文件 后加载哪些文件？
读任何一个程序代码时，第一步应该找到的是可执行程序的 入口：正如c/c++常见的main函数，这是一种约定。而对于node程序，一般都配置在package.json的script字段里面，eg：

"script": {
    "start": "webpack"
}

之行npm start时则会之行webpack的构建命令。

vue-cli脚手架构建出来的模板，会有很多配置文件，其中最重要的是webpack相关配置选项。在webpack里面会有入口文件entry。webpack内部根据入口来处理模块的依赖关系处理其处理里面的源码，并输出到里面指定的出口中。

2:主要加载了哪些文件，对应功能是什么 ？
加载文件主要是有webpack配置相关的内容，其作用各有不同。

3:还有就是明明没有在index.html里引入app.js，但是项目运行起来后 打开控制台显示通过script引入的app.js？

这里主要用到的是webpack的dev-server模块，其最终效果就是读取指定目标模板的字符，并在指定位置插入一些字符串而已。

题主提的问题在于对node应用程序、编译原理等了解不够的情况导致。建议以此顺序去完善知识体系：
1：编译原理。
2：nodejs和npm
3：webpack
4：webpack loaders
5：vue-loader

Answer 2

https://zhuanlan.zhihu.com/p/...

Answer 3

webpack