前言

记住框架的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. 新石器时代码农的Typescript开发总结

    如果评定前端在最近五年的重大突破,Typescript肯定能名列其中,重大到各大技术论坛.大厂面试都认为Typescript应当是前端的一项必会技能.作为一名消息闭塞到被同事调侃成"新石器时 ...

  2. ubuntu18.04+gunicorn+nginx+supervisor+mysql+redis安装django项目

    Ubuntu18.04 install Django project 项目准备: ECS 实例 (云服务器) 此安装部署方案适合本地ubuntu18.04系统安装和虚拟机中ubuntu18.04系统安 ...

  3. WNN48T6X 54端口国产化万兆交换机

    WNN48T6X是基于盛科CTC5160设计的国产化三层万兆交换机,提供48路千兆电口和6路万兆光口,采用龙芯 2K1000处理器,支持双冗余可插拔电源供电.支持常规的L2/L3协议,支持Telnet ...

  4. apk签名、包名

    //通过各手机管理软件,如如360.豌豆荚等查看 //使用命令行,可以查看到permission.packagename.title.versionCode等 aapt dump badging ~/ ...

  5. python-类的多态的理解

    了解多态 多态指的是一类事物有多种形态 .定义:多态是一中使用对象的方式,更容易编写出通用的代码,做出通用的编程,一适应需求的不断变化 实现步骤: 1．定义父类,并提供公共方法 2.定义子类,并重写父 ...

  6. linux中的gtk 编程的页面切换

    在我们使用gtk这个工具时,有时想在同一个窗口中,根据选择来显示不同的操作菜单,这篇博文主要是解决此类问题 //创建窗口 GtkWidget *CreateMenuMain() { GtkWidget ...

  7. 计算机图形学中使用Turbo C++画图步骤

    一.下载安装Turbo C++ 我安装的是Turbo C++ 3.2.2.0下载链接 二.画图 1.打开Turbo C++,点击右下角start turbo C++ 2.点击file ->new ...

  8. RabbitMQ 入门 (Go) - 5. 使用 Fanout Exchange 做服务发现（下）

    到目前为止,我一直专注于如何让消息进出消息代理,也就是RabbitMQ. 实际上,我们可以继续使用 RabbitMQ 和它的 Exchanges 来连接这个应用程序的其他部分,但是我想探索一个稍微不同 ...

  9. HTML5和CSS3提高

    一.HTML5的新特性 HTML5 的新增特性主要是针对于以前的不足,增加了一些新的标签.新的表单和新的表单属性等. 这些新特性都有兼容性问题,基本是 IE9+ 以上版本的浏览器才支持,如果不考虑兼容 ...

  10. [状压DP]车

    车 车 车 题目描述 在 n ∗ n n*n n∗n( n ≤ 20 n≤20 n≤20)的方格棋盘上放置 n n n个车(可以攻击所在行.列),有些格子不能放,求使它们不能互相攻击的方案总数. 输入 ...