本文主要是介绍查看Vue源码方式（怎么查看源码），对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

第一种方式（顺藤摸瓜的方式）

通常看一个前端开源下项目先看package.json文件（我博客园有package文件键值详细介绍）
 main是require的入口，module是import的入口

require('Vue') 实际是引用下面的文件（commonjs规范）
"main": "dist/vue.runtime.common.js", 
import Vue from 'vue' 实际是引用下面的文件（ES module规范）
"module": "dist/vue.runtime.esm.js",

我们可以看到上面不管是commonjs规范引入，还是es标识ES module规范引入的
文件都在dist下的目录中
dist目录下的文件是webpack build后产生的，"build": "node scripts/build.js",
所以我们可以顺藤摸瓜到scripts文件夹下看build.js

在build文件下 我们可以看到build(builds)这就是构建入口
其中形参 builds 就是 let builds = require('./config').getAllBuilds()
所以我们可以去config文件下去看getAllBuilds()方法
（或者在vscode中直接ctrl+左键点击getAllBuilds()方法，会自动跳转）

之后我们可以看到
exports.getAllBuilds = () => Object.keys(builds).map(genConfig)
这里便利了 我们可以看到形参builds是很多对象 这里引入了很多vuejs
其实这是为了兼容多平台使用的 因为不同规范引入方式不同 这里做了区分

这里我们选用builds中功能完善的entry-runtime-with-compiler.js
compiler说明有这个模块 这个模块可以将vue中的template模板编译成render执行
不然无这个模块虽然体积小了 但是只能用render编译虚拟dom（用js对象描述真是dom）

这个entry-runtime-with-compiler.js文件在
src/platforms/web文件夹中

在这个entry-runtime-with-compiler.js文件中 找到 export default Vue
这就是真正引入vue的地方 将vue暴露出去的地方
可以看到export default的vue就是  import Vue from './runtime/index'
这个暴露的vue就是这里引入的 我们可以去看下这个runtime目录下的index文件

我们可以注意到entry-runtime-with-compiler.js和runtime/index
里面都有  Vue.prototype.$mount 他们的区别就是有没有compiler
写了template还是render函数 上面说了compiler是用于解析template模板的
 render的优先级是高于template先执行

接着找 在runtime/index 又引入了 vue
import Vue from 'core/index' （src下的core）
再去src目录下找core/index
在里面再次发现引入了 vue import Vue from './instance/index'
最后在./instance/index中找到了原始初始化的vue文件 里面众多的init函数

第二种（利用debugger和--sourcemap）

先新建一个index.html静态文件 文件内容如下 里面的js加上debugger关键词
  <div id="app">
    {{message}}
    <xxx></xxx>
  </div>
  <script src="../../dist/vue.js"></script>
<script>
  debugger
  Vue.component('xxx', {
    template: "<div>90989</div>"
  })
  new Vue({
    // el: '#app',
    data: {
      message: 'tesserwgt'
    },
    // components:{
    //   localComp,
    //   globComp
    // }
  }).$mount('#app')

</script>

在package.json文件中的scripts下的dev中加入--sourcemap 如下
"dev": "rollup -w -c scripts/config.js --sourcemap --environment TARGET:web-full-dev",
之后运行 npm run dev 在dist文件夹中出现vue.js.map文件就算映射成功了
加入这个关键词的意思就是 webpack打包后的js是压缩在一起的，有几万行代码呢， 
你debugger调试的时候希望debuggger定位到vue的源码文件
也就是src下的core这个核心文件中
而不是定位到引入webpack打包后的vue.js（这是一个压缩文件里面集合了所有代码） 
所以--sourcemap有映射作用
利用这个我们就可以快速找到第一种方法最后找到的/instance/index 
这里面就是有各种初始化vue的函数

vue2源码目录结构

├── benchmarks                  性能、基准测试
├── dist                        构建打包的输出目录
├── examples                    案例目录
├── flow                        flow 语法的类型声明
├── packages                    一些额外的包，比如：负责服务端渲染的包 vue-server-renderer、配合 vue-loader 使用的的 vue-template-compiler，还有 weex 相关的
│   ├── vue-server-renderer
│   ├── vue-template-compiler
│   ├── weex-template-compiler
│   └── weex-vue-framework
├── scripts                     所有的配置文件的存放位置，比如 rollup 的配置文件
├── src                         vue 源码目录
│   ├── compiler                编译器
│   ├── core                    运行时的核心包
│   │   ├── components          全局组件，比如 keep-alive
│   │   ├── config.js           一些默认配置项
│   │   ├── global-api          全局 API，比如熟悉的：Vue.use()、Vue.component() 等
│   │   ├── instance            Vue 实例相关的，比如 Vue 构造函数就在这个目录下
│   │   ├── observer            响应式原理
│   │   ├── util                工具方法
│   │   └── vdom                虚拟 DOM 相关，比如熟悉的 patch 算法就在这儿
│   ├── platforms               平台相关的编译器代码
│   │   ├── web
│   │   └── weex
│   ├── server                  服务端渲染相关
├── test                        测试目录
├── types                       TS 类型声明

这篇关于查看Vue源码方式（怎么查看源码）的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！