前言

记住框架的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. 「NOIP 2020」微信步数（计数）

    「NOIP 2020」微信步数(Luogu P7116) 题意: 有一个 \(k\) 维场地,第 \(i\) 维宽为 \(w_i\),即第 \(i\) 维的合法坐标为 \(1, 2, \cdots, ...

  2. Android Studio 安装并使用genymotion

    一.安装genymotion与VirtualBox 1.安装 genymotion安装包:https://pan.baidu.com/s/1UTwvJv2pbHE4znBw91V19g virtual ...

  3. MySQL基础知识：MySQL Connection和Session

    在connection的生命里,会一直有一个user thread(以及user thread对应的THD)陪伴它. Connection和Session概念 来自Stackoverflow的一个回答 ...

  4. [源码分析] 消息队列 Kombu 之 mailbox

    [源码分析] 消息队列 Kombu 之 mailbox 0x00 摘要 本系列我们介绍消息队列 Kombu.Kombu 的定位是一个兼容 AMQP 协议的消息队列抽象.通过本文,大家可以了解 Komb ...

  5. Hashtable 渐渐被人们遗忘了，只有面试官还记得，感动

    尽人事,听天命.博主东南大学硕士在读,热爱健身和篮球,乐于分享技术相关的所见所得,关注公众号 @ 飞天小牛肉,第一时间获取文章更新,成长的路上我们一起进步 本文已收录于 「CS-Wiki」Gitee ...

  6. MongoDB教程--配置与入门

    MongoDB简介 阿里云配置MongoDB 数据库的增删查改 MongoDB 数据最重要的操作是Key-Value的映射.有了这样的映射,可以直接通过关键字去寻找想要的值.例如,通过用户的ID寻找与 ...

  7. Go Protobuf(比xml小3-10倍, 快20-100倍)

    简介 Protocol Buffers是什么? protocol buffers 是一种灵活,高效,自动化机制的结构数据序列化方法-可类比 XML,但是比 XML 更小.更快.更为简单.你可以定义数据 ...

  8. html+css写出响应式侧边导航栏

    html部分:先写用div画好六个导航的卡片,再利用css添加响应效果 <div class='card-holder'> <div class='card-wrapper'> ...

  9. java面试-死锁产生、定位分析和修复

    死锁发生:两个或多个线程之间,互相持有对方需要的锁,而永久处于阻塞状态 一.手写死锁代码: public class DeadLockSample extends Thread { private S ...

  10. Python基础（八）：字符串的使用（下）

    find() 功能:检测字符串是否包含指定字符.如果包含指定字符,则返回开始的索引:否则,返回-1. >>> st = "hello world" >> ...