当学习成为习惯，知识就成为常识。感谢您的点赞、收藏和评论。有新视频和文章会第一时间发到微信公众号。欢迎关注：李永宁lyn的文章已收录到github仓库liyongning/blog。欢迎收看星空。介绍栏目第一部分主要介绍栏目的目的、规划、适用人群、栏目准备和素养的基本知识。前言最近在准备一些Vue系列的文章和视频。之前看过几遍Vue的源码，但是没有写过相关的文章，所以打算最近写一篇。目标是精通Vue技术栈的源码原理，这是本系列文章的最终目标。首先从Vue源码入手解读，制作系列文章和视频，从源码详解，到手写Vue1.0和Vue2.0。之后会出源码分析和周边生态相关库的手写系列，比如：vuex,vue-router,vue-cli等。相信经过这一系列的认真学习，大家可以在上面写出这么一行简历：精通Vue技术栈源码原理。适合熟练使用Vue技术栈进行日常开发（增删改查）的人群。想深入了解框架实现原理，想跳槽或者找老板加薪的同学（增删改查毫无价值）如何学习系列文章，顺序学习自然是最好的。但是如果你对源码有一定的了解或者对某部分特别感兴趣，也可以直接阅读相应的文章。很多人习惯于利用碎片化的时间来学习。当然，快餐类的文章是没有问题的，但是如果想深入学习的话，还是建议坐在电脑前，全程对照文章自学。切记：假动作不能光看就练，所以在学习的过程中一定要勤奋，不要动笔墨，不要看书，比如笔记，思维导图，示例代码，写源码、调试等注释，千万不能偷懒。如果您觉得本系列文章对您有帮助，欢迎您点赞、关注、分享给您的朋友。最新的Vue2版本号是2.6.12，所以我就使用当前版本的代码进行分析学习。下载Vue源码git命令gitclonehttps://github.com/vuejs/vue.git去github手动下载，然后解压包执行npmi安装依赖。安装端到端测试工具时，直接ctrl+cdrop即可。不影响后续源码的学习。sourcemap在package.json->scripts中的dev命令中添加--sourcemap，方便在浏览器中调试源码时查看当前代码在源码中的位置。{"scripts":{"dev":"rollup-w-cscripts/config.js--sourcemap--environmentTARGET:web-full-dev"}}开发调试执行如下命令启动开发环境：npmrundev如果看到如下效果，在dist目录下生成了一个vue.js.map文件，就代表成功了。到这里所有的准备工作都已经完成了，但是不要删除当前的命令行ctrl+c，因为在阅读源码的时候会需要给源码添加注释，甚至更改源码。当前命令可以监控源代码的变化。如果发现改动会自动打包；如果你关闭当前的命令行，你会发现当你写注释代码的时候，在浏览器中调试源代码时会和sourcemap有偏差。所以不要为了更好的调试体验而关闭它。执行npmrunbuild命令后，会发现在dist目录下生成了一堆特殊命名的vue.*.js文件。这些特殊名称是什么意思？构建文件分类UMDCommonJSESModuleFullvue.jsvue.common.jsvue.esm.jsRuntime-onlyvue.runtime.jsvue.runtime.common.jsvue.runtime.esm.jsFull(production)vue.min.jsvue.common.prod.jsRuntime-only(production)vue.runtime.min.jsvue.runtime.common.prod.js术语解释Full：这是一个完整的包，包括编译器（compiler）和运行时（runtime）。编译器：编译器负责将模板字符串（也就是你用类html语法写的模板代码）编译成JavaScript语法的render函数。Runtime：负责创建Vue实例、渲染函数、patch虚拟DOM等代码，基本上除了编译器之外的所有代码都是runtime代码。UMD：兼容CommonJS和AMD规范，通过CDN引入的vue.js是UMD规范的代码，包括编译器和运行时。CommonJS：对于nodeJS等典型应用，browserify、webpack1等老牌打包器使用CommonsJS标准包，它们默认的入口文件是vue.runtime.common.js。ES模块：现代JavaScript规范，ES模块规范包被现代打包器使用，如webpack2和rollup。这些捆绑器默认使用仅包含运行时的vue.runtime.esm.js文件。Runtime+Compilervs.Runtime-only如果你需要动态编译模板（例如：将一个字符串模板传递给模板选项，或者通过提供一个挂载元素的html模板来编写），你将需要编译器，因此需要一个完整的buildpack。当你使用vue-loader或vueify时，*.vue文件中的模板将在构建时被编译成JavaScript渲染函数。所以你不需要包含编译器的完整包，只需要运行时包。仅运行时包比完整包小30%。所以尽量使用只包含运行时的包。如果你需要使用完整包，那么你需要配置如下：webpackmodule.exports={//...resolve:{alias:{'vue$':'vue/dist/vue.esm.js'}}}Rollupconstalias=require('rollup-plugin-alias')rollup({//...plugins:[alias({'vue':'vue/dist/vue.esm.js'})]})BrowserifyAdd到你项目的package.json:{//..."browser":{"vue":"vue/dist/vue.common.js"}}源目录结构通读目录结构，对源代码，并知道要寻找什么。...-server-renderer,vue-template-compilerusedwithvue-loader,andweexrelated│├──vue-server-renderer│├──vue-template-compiler│├──weex-template-compiler│└──weex-vue-framework├──scriptsrollup配置文件等所有配置文件存放位置├──srcvue源码目录│├──compiler编译器│├──coreruntime核心包││├──components全局组件，比如keep-alive)等││├──Vue实例相关的实例，比如本目录下的Vue构造函数││├──观察者响应原理││├──util工具方法││└──vdom虚拟DOM相关，比如熟悉的补丁算法在这里│├──platforms平台相关编译代码││├──web││└──weex│├──server服务器渲染相关├──test测试目录├──typesTS类型声明链接支持视频，关注微信公众号回复：》精通在《Vue技术栈源码原理视频版》精通Vue技术栈源码原理专栏GitHub仓库liyongning/Vue常识。感谢您的点赞、收藏和评论。有新视频和文章会第一时间发到微信公众号。欢迎关注：李永宁lyn的文章已收录到github仓库liyongning/blog。欢迎收看星空。
