vue源码分析系列之入debug环境搭建

nihao 发布于2019-08-26 13:29 / 1373人阅读

摘要：目标是为了可以调试版本的，也就是下的源码，所以主要是的开启。结语至此就可以开心的研究源码啦。文章链接源码分析系列源码分析系列之入口文件分析源码分析系列之响应式数据一源码分析系列之响应式数据二

概述

为了探究vue的本质，所以想debug一下源码，但是怎么开始是个问题，于是有了这样一篇记录。
目标是为了可以调试es6版本的，也就是src下的源码，所以主要是sourceMap的开启。
原文来自：https://blog.csdn.net/ReusLi/...。因为不喜欢其排版，所以简单整理一下。

流程

1.clone vue项目本身
这里是vue项目的克隆地址https://github.com/vuejs/vue.git,执行常规的git clone命令就好。

git clone https://github.com/vuejs/vue.git

2.npm install
3.npm run setup
4.npm install rollup-plugin-alias@^1.4.0 -D (非win10用户可跳过该步)
5.修改克隆下来的项目中的uildconfig.js文件中的function genConfig (name) {}内部的配置对象const config = {xxx}，在其中加入sourceMap: true字段。
6.npm run dev启动调试环境
7.打开/exapmle/commits/index.html文件，修改其中script[src]对vue的引用，修改其文件名为：vue.min.js->vue.js，然后在浏览器中直接打开该html即可。
8.开发者工具中调试跟进，探寻原理。

备注

第6步起来后，会在/dist目录下生成一个vue.js的文件，只要引入该文件即可调试。第7步中的examples文件夹中的文件作为示例使用。

补充：
2019-2-3:
再次在浏览器中打开html文件，其中的js没有关联到对应的sourceMap。后来尝试了下，使用了个简单的http-server的包，在vue的项目根目录，开启了一个简单的本地web的服务。然后通过该服务访问/example/commits/index.html时，成功的关联到了对应的sourceMap。

结语

至此就可以开心的研究vue源码啦。

文章链接

vue源码分析系列

vue源码分析系列之入口文件分析

vue源码分析系列之响应式数据（一）

vue源码分析系列之响应式数据（二）

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/108915.html

vue源码分析系列之响应式数据（一）

摘要：代码初始化部分一个的时候做了什么当我们一个时，实际上执行了的构造函数，这个构造函数内部挂载了很多方法，可以在我的上一篇文章中看到。合并构造函数上挂载的与当前传入的非生产环境，包装实例本身，在后期渲染时候，做一些校验提示输出。概述在使用vue的时候，data,computed,watch是一些经常用到的概念，那么他们是怎么实现的呢，让我们从一个小demo开始分析一下它的流程。 dem...

liujs 2019-08-23 15:11 评论0 收藏0
vue源码分析系列

摘要：本系列文章旨在化繁为简，通读源码，描述背后的实现逻辑。记录方式主要是代码注释文章链接源码分析系列之环境搭建源码分析系列之入口文件分析源码分析系列之响应式数据一源码分析系列之响应式数据二概述在使用vue的时候，会遇到很多神奇的地方，比如修改vue实例中data对象的属性值，会触发dom值的改变；改变dom中的输入，会触发data对应属性的改变，即双向数据绑定。通过watch可以...

Joonas 2019-08-23 15:10 评论0 收藏0
vue源码分析系列之响应式数据（四）

摘要：执行当时传入的回调，并将新值与旧值一并传入。文章链接源码分析系列源码分析系列之环境搭建源码分析系列之入口文件分析源码分析系列之响应式数据一源码分析系列之响应式数据二源码分析系列之响应式数据三前言上一节着重讲述了initComputed中的代码，以及数据是如何从computed中到视图层的，以及data修改后如何作用于computed。这一节主要记录initWatcher中的内容。 ...

GHOST_349178 2019-08-23 15:16 评论0 收藏0
vue源码分析系列之入口文件分析

摘要：中引入了中的中引入了中的中，定义了的构造函数中的原型上挂载了方法，用来做初始化原型上挂载的属性描述符，返回原型上挂载的属性描述符返回原型上挂载与方法，用来为对象新增删除响应式属性原型上挂载方法原型上挂载事件相关的方法。入口寻找入口platforms/web/entry-runtime-with-compiler中import了./runtime/index导出的vue。 ./r...

kgbook 2019-08-23 15:10 评论0 收藏0
教你如何在 IDEA 远程 Debug ElasticSearch

摘要：前提之前在源码阅读环境搭建文章中写过我遇到的一个问题迟迟没有解决，也一直困扰着我。然后后面自己分享文章在掘金也发现有人和我有同样的问题。下面讲讲另一种可以让你继续看源码的方法。配置新建一个远程的配置如下图接下来点击就好了。前提之前在源码阅读环境搭建文章中写过我遇到的一个问题迟迟没有解决，也一直困扰着我。问题如下，在启动的时候解决掉其他异常和报错后，最后剩下这个错误一直解决不了： [...

Cheng_Gang 2019-08-19 11:04 评论0 收藏0