Vue 目录结构

可以在 github 上通过这款 Chrome 插件 octotree 查看Vue的文件目录。也可以克隆到本地。。

Vue 是如何规划目录的

  • scripts ------------- 构建相关文件

    • git-hooks.js ----- 存放 git 钩子
    • alias.js ----- 别名配置文件
    • config.js ------ 生成 rollup 配置
    • build.js ----- 对上面config.js中所有的 rollup配置进行构建
    • replease.sh ----- 自动发布新版本的脚本
  • dist ------------- 构建后文件的输出目录
  • examples ------------- Vue中的一些例子 demo
  • flow ------------- JS中的类型声明,和typeScript差不多,提供强类型
  • packages ------------- 存放独立发布的包的目录
  • test ------------- 所有测试文件
  • src ------------- 包含了源码目录
    • compiler -----编译器代码存放的目录, 将 template 变异成 render函数
    • core ----- 存放通用的代码
      • observer ----- 存放响应系统, 包含数据观测的核心代码
      • vdmo ----- 包含虚拟DOM创建和打补丁
      • instance ----- Vue构造函数设计相关代码
      • global-api ----- Vue构造函数添加全局静态方法和属性的代码
      • components ----- 抽象出来的通用组件, 如 keep-alive
    • server ----- 包含服务器渲染
    • platforms ----- 包含平台特有的相关代码
      • web ----- web平台
      • weex ----- 混合应用
    • sfc ----- 包含单文件组件
    • shared ----- 通用的辅助代码
  • yarn.lock ------------- yarn 锁定文件
  • editorconfig ------------- 针对编辑器编码风格的配置文件
  • .flowconfig ------------- flow 配置文件
  • .babelrc ------------- babel 配置文件
  • .eslintrc ------------- eslint 配置文件
  • .eslintignore ------------- eslint 忽略配置
  • .gitignore ------------- git 忽略配置

Vue的构建配置和输出

Vue有三种不同的构建输出, 是 UMDCommenJSES modules。在 scripts/config.js的37行 builds对象中能看到

配置的入口文件 entry都是 web/entry-runtime.js, 但是输出的格式 format分别是 cjsesumd

每个模块的形式还分为: 运行时版完整版

运行时版本: web/entry-runtime.js
完整版: web/entry-runtime-with-compiler.js

主要差别是完整版比运行时版多了个 with-compiler.js, 这个使用用来将template编译成render函数的。

为什么要分为运行时版和完整版?

完整版 = 运行版 + Compiler。完整版就比运行时版多了个从 template编译成 render函数的过程。 将字符串模块编译成render函数不一定是要等到代码运行的时候去做,可以在构建的时候就完成这一步。所以运行时版结合构建工具搭配更好,可以减少库的提及,提升性能,还剋以将Compiler抽离成单独的包。

那完整版是不需要配合构建工具使用的。。

除了运行版和完整版,为啥还分这么多不同的包?

cjsesumd

直接通过 script 标签直接引入的包是 umd的, 但是写 Vue 大多数是配合构建工具 webpack等使用的。cjs是用于 webpack 1的, 而es是适用于 webpack 2+rollup等的。webpack 2+可以直接加载 ES Modules,所以适用于es的包。

Vue package.json文件

scripts下的配置

{
  "scripts": {
    // 构建 完整版 umd 模块的vue
    "dev": "rollup -w -c scripts/config.js --environment TARGET:web-full-dev",

    // 构建 `运行时` `cjs` 模块的vue
    "dev:cjs": "rollup -w -c scripts/config.js --environment TARGET:web-runtime-cjs",

    // 构建 `运行时` `es` 模块的vue
    "dev:esm": "rollup -w -c scripts/config.js --environment TARGET:web-runtime-esm",
    "dev:test": "karma start test/unit/karma.dev.config.js",

    // 构建 vue-server-renderer 包
    "dev:ssr": "rollup -w -c scripts/config.js --environment TARGET:web-server-renderer",

    // 构建 Compiler
    "dev:compiler": "rollup -w -c scripts/config.js --environment TARGET:web-compiler ",
    "dev:weex": "rollup -w -c scripts/config.js --environment TARGET:weex-framework",
    "dev:weex:factory": "rollup -w -c scripts/config.js --environment
  },
  "config": {
    "commitizen": {
      "path": "./node_modules/cz-conventional-changelog"
    }
  }
}

Vue源码学习一 ———— Vue项目目录的更多相关文章

  1. Vue源码学习1——Vue构造函数

    Vue源码学习1--Vue构造函数 这是我第一次正式阅读大型框架源码,刚开始的时候完全不知道该如何入手.Vue源码clone下来之后这么多文件夹,Vue的这么多方法和概念都在哪,完全没有头绪.现在也只 ...

  2. Vue源码学习二 ———— Vue原型对象包装

    Vue原型对象的包装 在Vue官网直接通过 script 标签导入的 Vue包是 umd模块的形式.在使用前都通过 new Vue({}).记录一下 Vue构造函数的包装. 在 src/core/in ...

  3. Vue源码学习三 ———— Vue构造函数包装

    Vue源码学习二 是对Vue的原型对象的包装,最后从Vue的出生文件导出了 Vue这个构造函数 来到 src/core/index.js 代码是: import Vue from './instanc ...

  4. vue 源码学习(一) 目录结构和构建过程简介

    Flow vue框架使用了Flow作为类型检查,来保证项目的可读性和维护性.vue.js的主目录下有Flow的配置.flowconfig文件,还有flow目录,指定了各种自定义类型. 在学习源码前可以 ...

  5. vue 源码学习三 vue中如何生成虚拟DOM

    vm._render 生成虚拟dom 我们知道在挂载过程中, $mount 会调用 vm._update和vm._render 方法,vm._updata是负责把VNode渲染成真正的DOM,vm._ ...

  6. 手牵手,从零学习Vue源码 系列一(前言-目录篇)

    系列文章: 手牵手,从零学习Vue源码 系列一(前言-目录篇) 手牵手,从零学习Vue源码 系列二(变化侦测篇) 手牵手,从零学习Vue源码 系列三(虚拟DOM篇) 陆续更新中... 预计八月中旬更新 ...

  7. Vue源码学习(一):调试环境搭建

    最近开始学习Vue源码,第一步就是要把调试环境搭好,这个过程遇到小坑着实费了点功夫,在这里记下来 一.调试环境搭建过程 1.安装node.js,具体不展开 2.下载vue项目源码,git或svn等均可 ...

  8. 最新 Vue 源码学习笔记

    最新 Vue 源码学习笔记 v2.x.x & v3.x.x 框架架构 核心算法 设计模式 编码风格 项目结构 为什么出现 解决了什么问题 有哪些应用场景 v2.x.x & v3.x.x ...

  9. 【Vue源码学习】依赖收集

    前面我们学习了vue的响应式原理,我们知道了vue2底层是通过Object.defineProperty来实现数据响应式的,但是单有这个还不够,我们在data中定义的数据可能没有用于模版渲染,修改这些 ...

随机推荐

  1. HTTP(一)概述

    总是觉得HTTP的学习不过就是几页的学习内容罢了,于是就总是没有好好的去学. 我发现我们更愿意通过实例来了解一个东西,不过这里还是添加一下概括的过程吧~ 一个不想看就跳过的概括:输入一个 URL,发生 ...

  2. 使用Telerik StyleMananger 改变Silverlight Button样式

    Telerik 支持更改以下控件样式 System.Windows.Button System.Windows.ScrollViewer System.Windows.CheckBox System. ...

  3. LeetCode 088 Merge Sorted Array 合并两个有序数组

    Given two sorted integer arrays nums1 and nums2, merge nums2 into nums1 as one sorted array.Note:You ...

  4. OpenStack Weekly Meeting 2015.07.17

    Reviews(Company) 1 Mirantis 11562 HP 1653 Huawei 15 Reviews(Persons) 1 Ekaterina Chernova ✻ 2852 Kir ...

  5. 牛客网Java刷题知识点之全局变量(又称成员变量,分为类变量和实例变量)、局部变量、静态变量(又称为类变量)

    不多说,直接上干货! 定义类其实就是在定义类中的成员.成员:成员变量<-->属性,成员函数<-->行为. 局部变量在方法内部声明,并且只能在方法内部使用,在外层的方法被调用时被 ...

  6. Flume NG部署

    本次配置单节点的Flume NG 1.下载flume安装包 下载地址:(http://flume.apache.org/download.html) apache-flume-1.6.0-bin.ta ...

  7. SpringBoot | 第七章:过滤器、监听器、拦截器

    前言 在实际开发过程中,经常会碰见一些比如系统启动初始化信息.统计在线人数.在线用户数.过滤敏高词汇.访问权限控制(URL级别)等业务需求.这些对于业务来说一般上是无关的,业务方是无需关系的,业务只需 ...

  8. 30分钟学会React Hook, Memo, Lazy

    我们来学习React 16.8里的新特性. 1. 自行配置好React的环境,推荐你使用Create React APP, 你也可以下载本文档Zip解压到本地直接运行. https://github. ...

  9. ajax post方式表单提交的注意事项。

    当我们创建一个异步对象XMLHttpRequest同时post方式向后台传输数据的时候. 我们要设置异步对象的xhr.setRequestHeader成员的值为 XMLHttpRequest.setR ...

  10. rem 适配屏幕大小

    window.onresize=function(){ var html=document.getElementsByTagName("html")[0]; var width=w ...