前言

记住框架的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源码解析-调试环境-代码目录和运行构建的更多相关文章

vue 源码学习（一）目录结构和构建过程简介
Flow vue框架使用了Flow作为类型检查,来保证项目的可读性和维护性.vue.js的主目录下有Flow的配置.flowconfig文件,还有flow目录,指定了各种自定义类型. 在学习源码前可以 ...
手牵手，从零学习Vue源码系列一（前言-目录篇)
系列文章: 手牵手,从零学习Vue源码系列一(前言-目录篇) 手牵手,从零学习Vue源码系列二(变化侦测篇) 手牵手,从零学习Vue源码系列三(虚拟DOM篇) 陆续更新中... 预计八月中旬更新 ...
【vuejs深入三】vue源码解析之二 htmlParse解析器的实现
写在前面一个好的架构需要经过血与火的历练,一个好的工程师需要经过无数项目的摧残. 昨天博主分析了一下在vue中,最为基础核心的api,parse函数,它的作用是将vue的模板字符串转换成ast,从而 ...
Vue源码解析之nextTick
Vue源码解析之nextTick 前言 nextTick是Vue的一个核心功能,在Vue内部实现中也经常用到nextTick.但是,很多新手不理解nextTick的原理,甚至不清楚nextTick的作 ...
【vuejs深入二】vue源码解析之一，基础源码结构和htmlParse解析器
写在前面一个好的架构需要经过血与火的历练,一个好的工程师需要经过无数项目的摧残. vuejs是一个优秀的前端mvvm框架,它的易用性和渐进式的理念可以使每一个前端开发人员感到舒服,感到easy.它内 ...
Vue源码解析---数据的双向绑定
本文主要抽离Vue源码中数据双向绑定的核心代码,解析Vue是如何实现数据的双向绑定核心思想是ES5的Object.defineProperty()和发布-订阅模式整体结构改造Vue实例中的dat ...
【VUE】Vue 源码解析
Vue 源码解析 Vue 的工作机制在 new vue() 之后,Vue 会调用进行初始化,会初始化生命周期.事件.props.methods.data.computed和watch等.其中最重要的 ...
Vue源码解析（一）：入口文件
在学习Vue源码之前,首先要做的一件事情,就是去GitHub上将Vue源码clone下来,目前我这里分析的Vue版本是V2.5.21,下面开始分析: 一.源码的目录结构: Vue的源码都在src目录下 ...
配置Windows 2008 R2 64位 Odoo 8.0/9.0 源码开发调试环境
安装过程中,需要互联网连接下载python依赖库: 1.安装: Windows Server 2008 R2 x64标准版 2.安装: Python 2.7.10 amd64 到C:\Python27 ...

随机推荐

java将数据生成csv文件
1,httpRequest接口触发进程[或者可以换成其他方式触发] /** * 出入库生成CSV文件 * @param req * @param params * @return */@Request ...
MYSQL的replace into
replace into t(id, update_time) values(1, now()); 或 replace into t(id, update_time) select 1, now(); ...
python基础（8）python中is和==的区别详解
前置知识点当我们创建一个对象时,我们要知道它内部干了些什么 1.创建了一个随机id,开辟了一片内存地址 2.自动声明了这个对象的类型type 3.给这个对象赋值value 小例子 a = 1 pri ...
h5移动端常见的问题及解决方案
01.ios端兼容input高度 #问题描述 input输入框光标,光标的高度和父盒子的高度一样,而android手机没问题 android ios #产生原因通常我们习惯用height属性设置行间 ...
nginx使用-1（源码安装nginx）
Nginx概述 Nginx (engine x) 是一个高性能的HTTP和反向代理web服务器,同时也提供了IMAP/POP3/SMTP服务.Nginx是由伊戈尔·赛索耶夫为俄罗斯访问量第二的Ramb ...
总结下js排序算法和乱序算法
其实本人最怕的就是算法,大学算法课就感觉老师在讲天书,而且对于前端来说,算法在实际的应用中实在是很有限.毕竟算法要依靠大量的数据为基础才能发挥出算法的效率,就浏览器那性能,......是吧,退一万步说 ...
python中zip函数的使用
zip(*iterables) zip可以将多个可迭代对象组合成一个迭代器对象,通过迭代取值,可以得到n个长度为m的元组.其中n为长度最短可迭代对象的元素个数,m为可迭代对象的个数.并且每个元组的第i ...
kiali的服务降级和暗隐的有关问题
记录两个问题 1. 服务在kiali的Applications 和 Workloads 显示为降级状态 2. 服务已经删除后在kiali的 Graph 显示依然存在前言 istio部署到预发集群后, ...
CVE-2021-21402 Jellyfin任意文件读取
CVE-2021-21402 Jellyfin任意文件读取漏洞简介 jellyfin 是一个自由的软件媒体系统,用于控制和管理媒体和流媒体.它是 emby 和 plex 的替代品,它通过多个应用程序 ...
Java基础 - List的两个子类的特点
List两个子类的特点 List的两个子类的特点因为两个类都实现了List接口,所以里面的方法都差不多,那这两个类都有什么特点呢? ArrayList: 底层数据结构是数组,查询快,增删慢. Lin ...

Vue源码解析-调试环境-代码目录和运行构建

前言