VUE源码--目录结构（一）

tuniutech 发布于2019-08-23 16:31 / 578人阅读

摘要：源码目录结构打包相关的配置文件，其中最重要的是。主要是根据不同的入口，打包为不同的文件。这个目录下的代码逻辑会把文件内容解析成一个的对象。

源码目录结构

VUE 2.6.10
├── scripts             # 打包相关的配置文件，其中最重要的是config.js。主要是根据不同的入口，打    包为不同的文件。
├── dist             # 打包之后文件所在位置
├── examples         # demo示例
├── flow             # Vue使用了Flow来进行静态类型检查，这里定义了声明了一些静态类型
├── packages         # vue还可以分别生成其它的npm包
├── src             # 主要源码所在位置
    ├── compiler        # 编译相关 
        ├── codegen         #根据ast生成render函数
        ├── directives         #通用生成render函数之前需要处理的指令
        ├── parser             #模板解析
    ├── core            # 核心代码
        ├── components         #全局的组件，这里只有keep-alive
        ├── global-api     #全局方法，也就是添加在Vue对象上的方法，比如Vue.use,Vue.extend,,Vue.mixin等
        ├── instance         #实例相关内容，包括实例方法，生命周期，事件等
        ├── observer         #双向数据绑定相关文件
        ├── util             #工具方法
        ├── vdom             #虚拟dom相关 
    ├── platforms       # 不同平台的支持
        ├── web             #web端独有文件
            ├── compiler         #编译阶段需要处理的指令和模块
            ├── runtime         #运行阶段需要处理的组件、指令和模块
            ├── server             #服务端渲染相关
            ├── util             #工具库
        ├── weex             #weex端独有文件
    ├── server          # 服务端渲染
    ├── sfc             # vue 文件解析
    ├── shared          # 共享工具代码
├── test             # 测试用例

==主要源码所在位置Src==

compiler

compiler 目录包含 Vue.js 所有编译相关的代码。它包括把模板解析成 ast 语法树，ast 语法树优化，代码生成等功能。

编译的工作可以在构建时做（借助 webpack、vue-loader 等辅助插件）；也可以在运行时做，使用包含构建功能的 Vue.js。显然，编译是一项耗性能的工作，所以更推荐前者——离线编译。

core
core 目录包含了 Vue.js 的核心代码，包括内置组件、全局 API 封装，Vue 实例化、观察者、虚拟 DOM、工具函数等等。

这里的代码可谓是 Vue.js 的灵魂，也是我们之后需要重点分析的地方。

platform
Vue.js 是一个跨平台的 MVVM 框架，它可以跑在 web 上，也可以配合 weex 跑在 native 客户端上。platform 是 Vue.js 的入口，2 个目录代表 2 个主要入口，分别打包成运行在 web 上和 weex 上的 Vue.js。

我们会重点分析 web 入口打包后的 Vue.js，对于 weex 入口打包的 Vue.js，感兴趣的同学可以自行研究。

server

Vue.js 2.0 支持了服务端渲染，所有服务端渲染相关的逻辑都在这个目录下。注意：这部分代码是跑在服务端的 Node.js，不要和跑在浏览器端的 Vue.js 混为一谈。

服务端渲染主要的工作是把组件渲染为服务器端的 HTML 字符串，将它们直接发送到浏览器，最后将静态标记"混合"为客户端上完全交互的应用程序。

sfc

通常我们开发 Vue.js 都会借助 webpack 构建，然后通过 .vue 单文件来编写组件。

这个目录下的代码逻辑会把 .vue 文件内容解析成一个 JavaScript 的对象。

shared
Vue.js 会定义一些工具方法，这里定义的工具方法都是会被浏览器端的 Vue.js 和服务端的 Vue.js 所共享的。

引用: Vue.js 技术揭秘.

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/103106.html

vue 源码学习（一）目录结构和构建过程简介

摘要：框架使用了作为类型检查，来保证项目的可读性和维护性。的主目录下有的配置文件，还有目录，指定了各种自定义类型。表示构建出来的文件遵循规范。 Flow vue框架使用了Flow作为类型检查，来保证项目的可读性和维护性。vue.js的主目录下有Flow的配置.flowconfig文件，还有flow目录，指定了各种自定义类型。在学习源码前可以先看下Flow的语法官方文档目录结构 vue....

lavnFan 2019-08-23 14:36 评论0 收藏0
人人都能懂的Vue源码系列—01—Vue源码目录结构

摘要：阅读的源码，或者说阅读一个框架的源码，了解它的目录结构都是很有帮助的。人人都能懂的源码系列文章将会详细的介绍源码的方方面面。阅读Vue的源码，或者说阅读一个框架的源码，了解它的目录结构都是很有帮助的。下面我们来看看Vue源码的目录结构。showImg(https://segmentfault.com/img/bV8fLS?w=598&h=654); Vue各目录简介下图是Vue各个...

MAX_zuo 2019-08-22 16:14 评论0 收藏0
vue源码解读-目录结构

摘要：目录结构构建相关的文件，一般情况下我们不需要动钩子别名配置目录结构 ├── scripts ------------------------------- 构建相关的文件，一般情况下我们不需要动│ ├── git-hooks ------------------------- git钩子│ ├── alias.js -------------------------- 别名配...

philadelphia 2019-08-23 13:51 评论0 收藏0
Vue源码之目录结构

摘要：运行时用来创建实例渲染并处理虚拟等的代码。基本上就是除去编译器的其它一切。版本可以通过标签直接用在浏览器中。为这些打包工具提供的默认文件是只有运行时的构建。为浏览器提供的用于在现代浏览器中通过直接导入。 Vue版本：2.6.9 源码结构图 ├─ .circleci // 包含CircleCI持续集成/持续部署工具的配置文件 ├─ .github ...

freewolf 2019-08-23 16:22 评论0 收藏0