前言

记住框架的api是能让我们熟练的使用框架，但优秀的施工人员和优秀的设计师，两者还是有本质的区别。框架的api是如何实现的，如果是我们通过源码调试找到的答案，相信一定会让自己印象深刻。学习源码的工程化编码风格，理解用到的设计模式，算法等，想必对自己的成长大有裨益。

1 代码结构

1.1 octotree插件

给大家安利一个github上看代码的小插件，octotree，https://www.octotree.io。可以看到vue2版本的项目结构如下图。

1.2 vue工程项目目录

可以在控制台中运行tree命令，将目录成树状打印。

  ├─.circleci

  ├─.github

  ├─benchmarks

  ├─dist        ## 发布的目标目录

  ├─examples    ## vue相关的使用举例

  ├─flow        ## 针对flow的类型声明

  ├─packages    ## core核心代码之外的其他一些功能包

  ├─scripts     ## 项目构建脚本

  ├─src         ## vue主要源码

  ├─test        ## 对于vue相关api单元测试以及使用举例的端对端测试等

  └─types       ## TypeScript类型声明

1.3 主要代码目录src

vue.js主要实现逻辑都在src资源目录下，这里先对主要目录进行一个简单的描述。

  ├─compiler        ## 编译生成render函数相关

  │  ├─codegen

  │  ├─directives

  │  └─parser

  ├─core            ## vue.js核心代码，实例化、响应式等

  │  ├─components

  │  ├─global-api

  │  ├─instance

  │  │  └─render-helpers

  │  ├─observer

  │  ├─util

  │  └─vdom

  │      ├─helpers

  │      └─modules

  ├─platforms      ## vue.js 对web端和weex端的分别支持

  │  ├─web

  │  │  ├─compiler

  │  │  │  ├─directives

  │  │  │  └─modules

  │  │  ├─runtime

  │  │  │  ├─components

  │  │  │  ├─directives

  │  │  │  └─modules

  │  │  ├─server

  │  │  │  ├─directives

  │  │  │  └─modules

  │  │  └─util

  │  └─weex

  │      ├─compiler

  │      │  ├─directives

  │      │  └─modules

  │      │      └─recycle-list

  │      ├─runtime

  │      │  ├─components

  │      │  ├─directives

  │      │  ├─modules

  │      │  └─recycle-list

  │      └─util

  ├─server         ## 服务端渲染ssr相关

  │  ├─bundle-renderer

  │  ├─optimizing-compiler

  │  ├─template-renderer

  │  └─webpack-plugin

  ├─sfc            ## .vue单文件组件解析相关

  └─shared         ##  web端和服务端渲染的公共代码

compiler

这个目录包含编译相关的代码，简单来说就是将 vue 的 template 字符串模板解析成 ast 抽象语法树，进而转换为 render 渲染函数。

core

这个目录包含vue的核心代码，封装了通用的全局组件、全局api、构造函数、响应式、工具方法，虚拟dom等。

platforms

这个目录包含跨端实现的相关代码，内部主要扩展了对weex的跨端开发的支持。里面的weex目录是对weex端的适配，web目录是对浏览器端的适配。

server

这个目录包含服务端渲染ssr实现的相关代码。

sfc

这个目录包含对vue单文件组件解析的相关代码，主要功能是将.vue 文件的内容解析成，符合单文件组件 (SFC) 规范的js描述对象。 https://vue-loader.vuejs.org/zh/spec.html vue-loader 文档中也有提到。

shared

这个目录包含一些公共配置项和方法。vue的web端和ssr服务端渲染都可以使用。

2 下载代码并运行构建

这里主要先对 vue 的2版本的源码进行分析，vue-next 3版本新特性会在后续文章中进行分析，如基于proxy实现的数据响应式，虚拟dom等。

2.1 源代码下载

这里选择2版本中最新的2.6.12版本进行下载。

2.2 打开项目安装依赖

用 npm i 或者 yarn add all 进行依赖包的安装。

2.3 package.json 的 scripts 配置中添加 --sourcemap

添加 --sourcemap，运行npm run dev 或者 yarn dev 生成带编译器版本的vue.js和其对应的.map 文件。我们在编写demo调试的时候，引用dist/vue.js文件，通过vue.js.map，在浏览器中调试，就能关联到对应的源码文件。如图所示。

3 编写demo进行调试

在源码项目中创建自己的demo目录，写一个简单的事例。

  <!DOCTYPE html>

  <html lang="en">

  <head>

      <meta charset="UTF-8">

      <meta http-equiv="X-UA-Compatible" content="IE=edge">

      <meta name="viewport" content="width=device-width, initial-scale=1.0">

      <title>init demo</title>

      <script src="../dist/vue.js"></script>

  </head>

  <body>

      <div id="app">{{title}}</div>

      <script>

          new Vue({

              data: {

                  title: "vue调试"

              }

          }).$mount("#app");

      </script>

  </body>

  </html>

断点调试的时候，你就能看到 sidebar 中对应的源码src目录。

ctrl + p 可以搜索指定的源码文件

Vue源码解析-调试环境-代码目录和运行构建的更多相关文章

  1. vue 源码学习（一） 目录结构和构建过程简介

    Flow vue框架使用了Flow作为类型检查,来保证项目的可读性和维护性.vue.js的主目录下有Flow的配置.flowconfig文件,还有flow目录,指定了各种自定义类型. 在学习源码前可以 ...

  2. 手牵手，从零学习Vue源码 系列一（前言-目录篇)

    系列文章: 手牵手,从零学习Vue源码 系列一(前言-目录篇) 手牵手,从零学习Vue源码 系列二(变化侦测篇) 手牵手,从零学习Vue源码 系列三(虚拟DOM篇) 陆续更新中... 预计八月中旬更新 ...

  3. 【vuejs深入三】vue源码解析之二 htmlParse解析器的实现

    写在前面 一个好的架构需要经过血与火的历练,一个好的工程师需要经过无数项目的摧残. 昨天博主分析了一下在vue中,最为基础核心的api,parse函数,它的作用是将vue的模板字符串转换成ast,从而 ...

  4. Vue源码解析之nextTick

    Vue源码解析之nextTick 前言 nextTick是Vue的一个核心功能,在Vue内部实现中也经常用到nextTick.但是,很多新手不理解nextTick的原理,甚至不清楚nextTick的作 ...

  5. 【vuejs深入二】vue源码解析之一，基础源码结构和htmlParse解析器

    写在前面 一个好的架构需要经过血与火的历练,一个好的工程师需要经过无数项目的摧残. vuejs是一个优秀的前端mvvm框架,它的易用性和渐进式的理念可以使每一个前端开发人员感到舒服,感到easy.它内 ...

  6. Vue源码解析---数据的双向绑定

    本文主要抽离Vue源码中数据双向绑定的核心代码,解析Vue是如何实现数据的双向绑定 核心思想是ES5的Object.defineProperty()和发布-订阅模式 整体结构 改造Vue实例中的dat ...

  7. 【VUE】Vue 源码解析

    Vue 源码解析 Vue 的工作机制 在 new vue() 之后,Vue 会调用进行初始化,会初始化生命周期.事件.props.methods.data.computed和watch等.其中最重要的 ...

  8. Vue源码解析（一）：入口文件

    在学习Vue源码之前,首先要做的一件事情,就是去GitHub上将Vue源码clone下来,目前我这里分析的Vue版本是V2.5.21,下面开始分析: 一.源码的目录结构: Vue的源码都在src目录下 ...

  9. 配置Windows 2008 R2 64位 Odoo 8.0/9.0 源码开发调试环境

    安装过程中,需要互联网连接下载python依赖库: 1.安装: Windows Server 2008 R2 x64标准版 2.安装: Python 2.7.10 amd64 到C:\Python27 ...

随机推荐

  1. java将一个list转换成一个String，中间用分隔符隔开

    List sn=[123,1231,1231,231] sn.toString();//[123,1231,1231,231] sn.join(',').toString();//123,1231,1 ...

  2. 分形、分形几何、数据可视化、Python绘图

    本系列采用turtle.matplotlib.numpy这三个Python工具,以分形与计算机图像处理的经典算法为实例,通过程序和图像,来帮助读者一步步掌握Python绘图和数据可视化的方法和技巧,并 ...

  3. 使用shell脚本替换Hadoop配置文件的值

    因为懒汉式的实现是线程安全的,所以会降低整个访问速度,而且每次访问都要判断一次.有没有更好的方式实现呢?可以使用"双重检查枷锁"的方式来实现. 所谓"双重检查加锁&quo ...

  4. c语言跨文件调用函数中声明的变量

    转载:weixin_33885253 变量的作用域 变量根据其作用域有全局变量和局部变量之分.全局变量作用域是整个文件,并且可以使用关键字extern达到跨文件调用的目的.但是局部变量值作用于它当前所 ...

  5. ubuntu修改默认启动内核

    一.序言 新换的笔记本由于太新的主板芯片,驱动还没有完善.每次升级系统内核都要小心谨慎.经常发生部分硬件驱动失败的事情.系统Ubuntu 20.04.2 LTS x86_64 ,我现在使用的两个版本的 ...

  6. Java 并发工具类 CountDownLatch、CyclicBarrier、Semaphore、Exchanger

    本文部分摘自<Java 并发编程的艺术> CountDownLatch CountDownLatch 允许一个或多个线程等待其他线程完成操作.假设现有一个需求:我们需要解析一个 Excel ...

  7. Python代码简化

    让代码更Pythonic 当然不要过分追求简洁,不然阅读的人就遭殃了, 部分逻辑复杂的情况还应按照清晰的逻辑脉络去写方便阅读, 毕竟我们是用代码实现功能然后维护,而不是单单的炫技. ######### ...

  8. BUAA_OO_2020_第四单元与课程总结

    BUAA_OO_2020_第四单元与课程总结 第四单元架构 第一次 架构设计 第一次作业要求实现UML类图解析器. 我才用自顶向下依次解析的方法,首先将类图中涉及的所有元素分成三层: 第一层 第二层 ...

  9. codeup 1918 简单计算器

    题目描述:读入一个只包含 + ,-,×, / 的非负整数计算表达式,计算该表达式的值.输入格式:测试输入包含若干测试用例,每个测试用例占一行,每行不超过200个字符,整数和运草符之间用一个空格分隔.没 ...

  10. GoF设计模式合集

    1 概述 这篇文章是对GoF23种设计模式+1种非GoF模式的合集,由笔者自己的笔记整理而来,每个模式都详细描述了步骤,角色等,以及使用Java实现的具体的例子. 2 基础 设计模式概述 UML与面向 ...