前言

记住框架的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 ...

随机推荐

CVE-2017-12149-JBoss 5.x/6.x 反序列化
漏洞分析 https://www.freebuf.com/vuls/165060.html 漏洞原理该漏洞位于JBoss的HttpInvoker组件中的 ReadOnlyAccessFilter 过 ...
02-Spring配置文件加载
获取IOC容器加载.解析xml文件,形成GenericBeanDefinition,供后续实例化剩下的所有 Bean 使用. obtainFreshBeanFactory() 获取IOC容器 pro ...
Tornado 简明教程
1.TornadoTornado:python编写的web服务器兼web应用框架1.1.Tornado的优势轻量级web框架异步非阻塞IO处理方式出色的抗负载能力优异的处理性能,不依赖多进程/多线程, ...
如何动态生成EasyUI的表头
需求前几天遇到了这样一个需求,在页面上展示一组数据,但是表头不固定,需要动态加载出来.比如这次查询表头有[姓名][年龄],可能下次查询表头就变成了[姓名][年龄][性别]. 思路简介我刚刚接手这个 ...
在Python中创建M x N的数组
在Python中创建M x N的数组一般有三种方法: 列表乘法 dp = [[0] * n] * m for 循环 dp= [[0 for _ in range(n)] for _ in range ...
python3 虚拟环境 venv
创建一个虚拟环境: python -m venv test (test 为创建的虚拟环境目录) 激活虚拟环境: test\Scripts\activate ...
python3 int() 各数据类型转int
print(int('0b1010',0))#二进制数print(int('0xa',0))#十六进制数print(int('0xa',16))print(int('a',16))print(int( ...
分享一次排查CLOSE_WAIT过多的经验
关键词:TCP.CLOSE_WAIT 问题背景某日下午有测试人员急匆匆的跑来跟我反馈:"有客户反馈供应商附件预览不了,流程阻塞,需要紧急处理",我立马精神起来,毕竟都是付费客户( ...
自学PHP笔记(三) 类型转换
本文转发来自:https://blog.csdn.net/KH_FC/article/details/115558701 在真正使用PHP写项目时会经常用到不同数据类型之间进行转换,PHP中类型转换是 ...
201871010113-贾荣娟实验三结对项目—《D{0-1}KP 实例数据集算法实验平台》项目报告
项目内容课程班级博客链接 18级卓越班这个作业要求链接实验三-软件工程结对项目这个课程学习目标掌握软件开发流程,提高自身能力这个作业在哪些方面帮助我实现了学习目标本次实验让我对软件工程 ...

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

前言