Vue系列---源码调试(二)
我们要对Vue源码进行分析,首先我们需要能够对vue源码进行调式(这里的源码调式是ES6版本的,不是打包后的代码),因此首先我们要去官方github上克隆一份vue项目下来,如下具体操作:
1. clone vue项目
git clone https://github.com/vuejs/vue.git
2. 下载依赖包
npm install
下载完后包,我们把视线转移到package.json文件中的scripts来,如下打包命令:
"scripts": {
"dev": "rollup -w -c scripts/config.js --environment TARGET:web-full-dev"
},
这边我们最关注的是 "dev" 这个打包命令,它是使用rollup进行打包的,我们只需要在命令后面加入 --sourcemap 即可,比如如下
"dev": "rollup -w -c scripts/config.js --environment TARGET:web-full-dev --sourcemap",
那么这样的话,当我们执行命令 npm run dev 打包时,会在我们的 dist 文件夹下 生成 vue.js.map 文件。
然后我们把视线转移到项目中的 examples/commit/index.html 来,把页面引入的 <script src="../../dist/vue.min.js"></script> 改成 <script src="../../dist/vue.js"></script> 即可,这样当我们继续 执行命令 npm run dev 后,然后我们在本地打开该页面,我们就会看到如下源码了,如下所示:
这样我们就可以对源码进行调试了。
Vue系列---源码调试(二)的更多相关文章
- 关于vue的源码调试
一直看源码都是硬生生的看, 其实, 还是感觉调试起来会看的比较舒服. GitHub把vue的源码下载下来 npm install && npm run dev 在example中新建一 ...
- Vue.js 源码分析(二十八) 高级应用 transition组件 详解
transition组件可以给任何元素和组件添加进入/离开过渡,但只能给单个组件实行过渡效果(多个元素可以用transition-group组件,下一节再讲),调用该内置组件时,可以传入如下特性: n ...
- Vue.js 源码分析(二十二) 指令篇 v-model指令详解
Vue.js提供了v-model指令用于双向数据绑定,比如在输入框上使用时,输入的内容会事实映射到绑定的数据上,绑定的数据又可以显示在页面里,数据显示的过程是自动完成的. v-model本质上不过是语 ...
- Vue.js 源码分析(二十七) 高级应用 异步组件 详解
当我们的项目足够大,使用的组件就会很多,此时如果一次性加载所有的组件是比较花费时间的.一开始就把所有的组件都加载是没必要的一笔开销,此时可以用异步组件来优化一下. 异步组件简单的说就是只有等到在页面里 ...
- Vue.js 源码分析(二十六) 高级应用 作用域插槽 详解
普通的插槽里面的数据是在父组件里定义的,而作用域插槽里的数据是在子组件定义的. 有时候作用域插槽很有用,比如使用Element-ui表格自定义模板时就用到了作用域插槽,Element-ui定义了每个单 ...
- Vue.js 源码分析(二) 基础篇 全局配置
Vue.config是一个对象,包含Vue的全局配置,可以在启动应用之前修改下列属性,如下: ptionMergeStrategies ;自定义合并策略的选项silent ...
- Vue系列---源码构建过程(四)
在了解源码如何构建之前,我们有必要了解下 项目中一个简单的目录结构如下: |---- vue | |---- dist # 打包后的存放文件目录 | |---- scripts # 存放构建相关的代码 ...
- Vue.js 源码分析(二十九) 高级应用 transition-group组件 详解
对于过度动画如果要同时渲染整个列表时,可以使用transition-group组件. transition-group组件的props和transition组件类似,不同点是transition-gr ...
- Vue.js 源码分析(二十五) 高级应用 插槽 详解
我们定义一个组件的时候,可以在组件的某个节点内预留一个位置,当父组件调用该组件的时候可以指定该位置具体的内容,这就是插槽的用法,子组件模板可以通过slot标签(插槽)规定对应的内容放置在哪里,比如: ...
随机推荐
- [Linux] telnet 具体到某个端口Connection refused
可以参考这个链接:https://q.cnblogs.com/q/106337/
- 容器时代的持续交付工具---Drone:Drone介绍与安装
Drone:Drone is a Container-Native, Continuous Delivery Platform. 官方给的定义,从上面的定义可以得出两个关键点: 1,Container ...
- 【面试】我是如何在面试别人Redis相关知识时“软怼”他的
事出有因 Redis是一个分布式NoSQL数据库,因其数据都存储在内存中,所以访问速度极快,因此几乎所有公司都拿它做缓存使用,所以Redis常被称为分布式缓存. 一次我的一个同事让我帮他看Redis相 ...
- 9 个基于JavaScript 和 CSS 的 Web 图表框架
COMSHARP CMS 写道:jQuery, MooTools, Prototype 等优秀的 JavaScript 框架拥有各种强大的功能,包括绘制 Web图表,使用这些框架以及相应插件,我们可以 ...
- Knative 实战:基于 Knative Serverless 技术实现天气服务-上篇
提到天气预报服务,我们第一反应是很简单的一个服务啊,目前网上有大把的天气预报 API 可以直接使用,有必要去使用 Knative 搞一套吗?杀鸡用牛刀?先不要着急,我们先看一下实际的几个场景需求: 场 ...
- 给定一个公式字符串用java进行拆解并计算结果
需求很简单,给定一个字符串形式的公式规则,用java代码进行拆解,并能计算出结果. ♦考虑字符串中数字格式[整数.小数点] ♦考虑字符串中运算符[+-*/()] ♦考虑空格.运算规则[被0除] 以下是 ...
- vue平行组件传值
平行组件传值 通过平行组件传值可以实现任何情境下的传值,包括(父传子,子传父) 代码示例 <!DOCTYPE html> <html lang="en"> ...
- Linux Shell 基础知识(二)
1.本文知识结构 2.文件的查询与检索 2.1. cd 目录切换 找到文件/目录位置:cd 切换到上一个工作目录: cd - 切换到home目录: cd or cd ~ 显示当前路径: pwd 更改当 ...
- Scala 学习笔记之集合(3)
建立一个Java类,为了演示Java集合类型向Scala集合的转换: import java.util.ArrayList; import java.util.List; public class S ...
- 浅谈MVC&MTV设计模式
在目前基于Python语言的几十个Web开发框架中,几乎所有的全栈框架都强制或引导开发者使用MVC设计模式.所谓全栈框架,是指除了封装网络和线程操作,还提供HTTP.数据库读写管理.HTML模板引擎等 ...