Vue源码阅读（2）：先来了解一下Vue的目录结构和相关的基础概念

 我的开源库：

• fly-barrage 前端弹幕库，项目官网：https://fly-barrage.netlify.app/，可实现类似于 B 站的弹幕效果，并提供了完整的 DEMO，Gitee 推荐项目；
• fly-gesture-unlock 手势解锁库，项目官网：https://fly-gesture-unlock.netlify.app/，在线体验：https://fly-gesture-unlock-online.netlify.app/，可高度自定义锚点的数量、样式以及尺寸；

1，目录结构

├─build                                        // 存放 Vue 项目的编译和发布脚本             
│
├─dist                                         // 存放编译后的文件
│
│      // 完整版（编译器 + runtime），采用commonjs模块规范的编译文件
│      vue.common.js
│                                
│      // 完整版（编译器 + runtime），采用官方的、标准的模块规范（ES Module）的编译文件
│      vue.esm.js 
│ 
│      // 完整版（编译器 + runtime），采用umd模块规范的编译文件                           
│      vue.js
│
│      // vue.js 的压缩文件 
│      vue.min.js
│
│      // 只包含运行时环境的代码，不包含编译其，采用commonjs模块规范的编译文件
│      vue.runtime.common.js
│
│      // 只包含运行时环境的代码，采用官方的、标准的模块规范（ES Module）的编译文件
│      vue.runtime.esm.js
│
│      // 只包含运行时环境的代码，采用umd模块规范的编译文件  
│      vue.runtime.js
│
│      // vue.runtime.js 的压缩文件 
│      vue.runtime.min.js
│
├─flow                                         // 存放 flow 的类型定义文件
│
├─packages                                     // 会发布到 NPM 仓库的包，发布的脚本可以看
│                                              // build/release.sh，build/release-weex.sh
│
│      vue-server-renderer
│
│      vue-template-compiler
│
│      weex-template-compiler
│
│      weex-vue-framework
│
├─src                                          // Vue 的源代码目录
│  │
│  ├─compiler                                  // 与模板编译相关的代码
│  │
│  ├─core                                      // 通用的、与平台无关的运行时代码
│  │  │
│  │  ├─components                             // 通用的抽象组件（keep-alive）
│  │  │
│  │  ├─global-api                             // 一些全局的 API，使用 Vue.xxx() 调用
│  │  │                                        // 例如：Vue.use()、Vue.mixin()
│  │  │
│  │  ├─instance                               // 用于构建 Vue 实例的代码
│  │  │
│  │  ├─observer                               // 用于数据的依赖收集和变化侦测
│  │  │
│  │  ├─util                                   // 工具库
│  │  │
│  │  └─vdom                                   // 实现 Vue 中虚拟 DOM 的代码
│  │
│  ├─platforms                                 // 特定平台的代码，rollup 的编译入口也在这里
│  │  │
│  │  ├─web
│  │  └─weex
│  │
│  ├─server                                    // 与服务器端渲染相关的代码
│  │
│  ├─sfc                                       // 单文件组件（xxx.vue）的解析器
│  │
│  └─shared                                    // 服务于整个 Vue 项目的工具库
│
├─test                                         // 测试代码
│
├─types                                        // TypeScript 类型定义文件
│
│  .flowconfig                                 // flow 的配置文件
│  package.json                                // Node 项目的配置（描述）文件

2，完整版代码

完整版的代码包含 编译器 和 运行时 的代码。

3，编译器的作用

用于将 HTML 模板字符串解析成运行时（runtime）代码能够执行的 render 函数，例如：有下面的模板字符串。

new Vue({
  el: '#app',
  data() {
    return {
      message: 'Hello Vue'
    }
  },
  template: '<div id="container" class="container" name="tom">{{ message }}</div>'
})

通过模板编译后，就会将 template 模板字符串解析成如下的 render 函数。

new Vue({
  el: '#app',
  data() {
    return {
      message: 'Hello Vue'
    }
  },
  render (createElement) {
      return createElement(
        'div',
        {
          staticClass: "container",
          attrs: {"id": "container","name": "tom"}
        },
        [_v(_s(message))]
      )
  }
})

4，运行时代码

负责 Vue 实例的创建，视图的渲染以及借助虚拟 DOM 对视图进行高效的重新渲染。

5，不同构建版本的解释