Skip to content
⚡️ A simple implementation for MVVM of Vue.js, and deep into Vue.js.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
build
docs
src refactor Sep 5, 2018
vue_router_src
vue_src
vuex_src
.gitignore
LICENSE
README.md
package.json
yarn.lock

README.md

mVue

A simple implementation for MVVM of Vue.js, and deep into Vue.js.

开始

  • src目录下是对Vue双向绑定简化版的源码。
  • vue_src目录是Vue的源码,加了学习源码的注释。
  • vue_router_src目录是vue-router的源码。
  • vuex_src目录是vuex的源码。
  • docs目录下是Vue的学习笔记。也可以直接访问这里

简单介绍

Vue.js 在做 2.0 重构时,引入了 Flow 做静态类型检查,选择 Flow,主要是因为 Babel 和 ESLint 都有对应的 Flow 插件以支持语法, 可以完全沿用现有的构建配置,非常小成本的改动就可以拥有静态类型检查的能力。

Flow

Flow 两个重要的特性:

  • 类型推断,通过变量的使用上下文来推断出变量类型,并检查类型。
  • 类型注释,基于注释来判断类型。

Vue 源码目录

src目录下我们能看到:

src
├── compiler        # 编译相关
├── core            # 核心代码
├── platforms       # 不同平台的支持
├── server          # 服务端渲染
├── sfc             # .vue 文件解析
├── shared          # 共享代码
  • compiler,所有编译相关的代码。它包括把模板解析成 ast 语法树,ast 语法树优化,代码生成等功能。
  • core,核心代码,包括内置组件、全局 API 封装,Vue 实例化、观察者、虚拟 DOM、工具函数等等。
  • platform,Vue 是一个跨平台的框架,可以跑在 web 上,也可以配合 weex 跑在 native 客户端上,platform 是 Vue.js 的入口, webweex目录,分别打包成运行在 web 上和 weex 上的 Vue.js。
  • server,所有服务端渲染相关的逻辑都在这个目录下。
  • sfc,目录下的代码逻辑会把 .vue 文件内容解析成一个 JavaScript 的对象。
  • shared,定义一些工具方法,被浏览器端的 Vue.js 和服务端的 Vue.js 所共享。

Vue 源码构建

Vue 通过 Rollup 构建,构建脚本在package.json中:

{
  "script": {
    "build": "node scripts/build.js",
    "build:ssr": "npm run build -- web-runtime-cjs,web-server-renderer",
    "build:weex": "npm run build --weex"
  }
}

打开scripts/build.js

let builds = require('./config').getAllBuilds()

// filter builds via command line arg
if (process.argv[2]) {
  const filters = process.argv[2].split(',')
  builds = builds.filter(b => {
    return filters.some(f => b.output.file.indexOf(f) > -1 || b._name.indexOf(f) > -1)
  })
} else {
  // filter out weex builds by default
  builds = builds.filter(b => {
    return b.output.file.indexOf('weex') === -1
  })
}

build(builds)

先从配置文件读取配置,再通过命令行参数对构建配置做过滤,这样就可以构建出不同用途的 Vue 了.

You can’t perform that action at this time.