最近开始学习Vue源码,第一步就是要把调试环境搭好,这个过程遇到小坑着实费了点功夫,在这里记下来

一、调试环境搭建过程

1、安装node.js,具体不展开

2、下载vue项目源码,git或svn等均可

我这里打算参考http://hcysun.me/2017/03/03/Vue%E6%BA%90%E7%A0%81%E5%AD%A6%E4%B9%A0/来学习,所以使用2.1.7版本

3、执行npm install

4、执行npm run dev,到这里问题来了,这些问题在下文第二部分详细写,这里先把整个搭建流程说完

5、到第4部中dev命令执行成功后,在\dist目录下生成vue.js文件。我们使用examples中的例子,直接用<script src="dist/vue.js">引入开发版vue.js,就可以调试了。

6、第5步中我们只能针对编译的vue.js进行调试,要想直接针对vue源码中src目录下的各个文件调试需要做如下配置:

1)打开build/config.js

2)在genConfig() 函数的config中添加属性sourceMap: true

3)重新执行npm run dev,这回在\dist目录下会生成两个文件:vue.js、vue.js.map

4)再次在浏览器中打开测试文件可以看到src下的所有文件

二、npm run dev 问题整理

1、‘TARGET’不是内外部命令

解决方法:

修改package.json中dev命令,在TARGET=web-full-dev前加‘set’,如下

"scripts": {
"dev": "set TARGET=web-full-dev rollup -w -c build/config.js", // 添加set,修改前为 "dev": "TARGET=web-full-dev rollup -w -c build/config.js"
.....
}

2、问题1解决后,执行npm run dev不报错但启动不起来

仔细看dev命令的配置,大概过一下build/confi.js不难发现dev这里应该是两个命令前后相继执行:先给TARGET赋值web-full-dev,然后执行rollup打包命令。

解决方法:

修改package.json中dev命令,dev在两个命令之间加‘&&’(并发执行、继续执行参考文档第三篇介绍《npm 的命令以及 pageage.json的scripts字段》),如下:

"scripts": {
"dev": "set TARGET=web-full-dev && rollup -w -c build/config.js", // 添加set和&&符,修改前为 "dev": "TARGET=web-full-dev rollup -w -c build/config.js"
.....
}

3、问题2尝试解决后,再次执行npm run dev,报错如下:

看样子是build/config.js文件的问题,打印看下TARGET赋值正确与否

再次执行后发现TARGET值包含空格(这里是跟npm命令脚本语法有关吗?暂时没弄清楚)

最终解决方法:

尝试把‘&&’赋前后的空格去掉再次执行成功

PS:查一眼2.3.0,dev命令改成了‘rollup -w -c build/config.js --environment TARGET:web-full-dev‘,正常运行。好吧,折腾这么半天,我还能说什么...

4、另外,win10下可能遇到alias目录错误的问题,我这里没在win10下验证,不过解决方法可以参考文章第一篇《vue源码调试踩坑记录》

参考文档:

vue源码调试踩坑记录:https://blog.csdn.net/reusli/article/details/78762510

Vue2.x源码学习笔记-Vue源码调试:http://www.cnblogs.com/sorrowx/p/7978353.html

npm 的命令以及 pageage.json的scripts字段:https://blog.csdn.net/watersprite_ct/article/details/78622071

Vue源码学习(一):调试环境搭建的更多相关文章

  1. spring源码学习之路---环境搭建(一)

    作者:zuoxiaolong8810(左潇龙),转载请注明出处,特别说明:本博文来自博主原博客,为保证新博客中博文的完整性,特复制到此留存,如需转载请注明新博客地址即可. 最近已经开始了spring源 ...

  2. Vue源码学习1——Vue构造函数

    Vue源码学习1--Vue构造函数 这是我第一次正式阅读大型框架源码,刚开始的时候完全不知道该如何入手.Vue源码clone下来之后这么多文件夹,Vue的这么多方法和概念都在哪,完全没有头绪.现在也只 ...

  3. Vue源码学习三 ———— Vue构造函数包装

    Vue源码学习二 是对Vue的原型对象的包装,最后从Vue的出生文件导出了 Vue这个构造函数 来到 src/core/index.js 代码是: import Vue from './instanc ...

  4. Vue源码学习二 ———— Vue原型对象包装

    Vue原型对象的包装 在Vue官网直接通过 script 标签导入的 Vue包是 umd模块的形式.在使用前都通过 new Vue({}).记录一下 Vue构造函数的包装. 在 src/core/in ...

  5. 最新 Vue 源码学习笔记

    最新 Vue 源码学习笔记 v2.x.x & v3.x.x 框架架构 核心算法 设计模式 编码风格 项目结构 为什么出现 解决了什么问题 有哪些应用场景 v2.x.x & v3.x.x ...

  6. 【Vue源码学习】依赖收集

    前面我们学习了vue的响应式原理,我们知道了vue2底层是通过Object.defineProperty来实现数据响应式的,但是单有这个还不够,我们在data中定义的数据可能没有用于模版渲染,修改这些 ...

  7. 【Vue源码学习】响应式原理探秘

    最近准备开启Vue的源码学习,并且每一个Vue的重要知识点都会记录下来.我们知道Vue的核心理念是数据驱动视图,所有操作都只需要在数据层做处理,不必关心视图层的操作.这里先来学习Vue的响应式原理,V ...

  8. Vue 源码学习(1)

    概述 我在闲暇时间学习了一下 Vue 的源码,有一些心得,现在把它们分享给大家. 这个分享只是 Vue源码系列 的第一篇,主要讲述了如下内容: 寻找入口文件 在打包的过程中 Vue 发生了什么变化 在 ...

  9. VUE 源码学习01 源码入口

    VUE[version:2.4.1] Vue项目做了不少,最近在学习设计模式与Vue源码,记录一下自己的脚印!共勉!注:此处源码学习方式为先了解其大模块,从宏观再去到微观学习,以免一开始就研究细节然后 ...

随机推荐

  1. WPF Invoke和BeginInvoke

    在WPF中Invoke和BeginInvoke和Winform中的是差不多的,只是一个用Control的一个用Dispatcher的. 而Invoke和BeginInvoke的区别嘛 就是一个是同步的 ...

  2. python 邮件发送实例

    #!/usr/bin/env python # -*- coding: utf-8 -*- from email.header import Header from email.mime.text i ...

  3. Ceph:pg peering过程分析

    转自:https://www.ustack.com/blog/ceph%ef%bc%8dpg-peering/ Peering:互为副本的三个(此处为设置的副本个数,通常设置为3)pg的元数据达到一致 ...

  4. ipmitool 查看硬件信息

    [root@75-6-25-yf-core ~]# cat /var/log/mcelog MCE 0HARDWARE ERROR. This is *NOT* a software problem! ...

  5. angularJS中directive父子组件的数据交互

    angularJS中directive父子组件的数据交互 1. 使用共享 scope 的时候,可以直接从父 scope 中共享属性.使用隔离 scope 的时候,无法从父 scope 中共享属性.在 ...

  6. python基础之socket编程(二)

    ssh远程执行命令: 思路分析: 客户端给服务端发送命令,服务端返回一个输出结果传给客户端. #coding:utf-8 #买手机 import socket import struct import ...

  7. gethostbyname()函数

    gethostbyname()函数说明——用域名或主机名获取IP地址 包含头文件    #include <netdb.h>    #include <sys/socket.h> ...

  8. Visual Studio Nuget还原步骤

    vs2013是在这里还原: NuGet套件还原步骤(以vs2012为例) 下载别人的范例,出现由于Nuget套件不存在而无法启动时:效果如下图: 步骤如下:1.点击 项目->启用NuGet程序包 ...

  9. git合并分支与解决冲突

    前提: 当前开发的分支为feature/20161129_317606_algoplatform_1,由于feature/20161130_322574_tmstools_1分支有新内容,所以准备将f ...

  10. Lua基础---流程控制语句

    Lua提供了if语句和if else语句作为流程控制语句,当然,符合C的特点,流程语句之间可以实现嵌套操作,当然流程控制也可以和循环体结合进行控制. 1.if语句 if(布尔表达式) then --[ ...