下載

去github上下載Vue https://github.com/vuejs/vue

npm install npm run dev

運行起來

rollup + flow

vue使用使用rollup打包，flow規(guī)范數(shù)據(jù)類型

rollup可以先用webpack套用，讀起來差不多，時間有限，畢竟只有5分鐘，這個就不用去看rollup文檔了

入口

打開package.json

我們看scripts配置

"dev": "rollup -w -c scripts/config.js --environment TARGET:web-full-dev", "dev:cjs": "rollup -w -c scripts/config.js --environment TARGET:web-runtime-cjs-dev",

找到scripts/config.js

打開

根據(jù)配置TARGET的不同會選擇不同的config

同時在這里配置了process.env.NODE_ENV 環(huán)境

TARGET有CommonJS，ES Modules，UMD關(guān)于js引入類型的

還有weex，ssr

'web-runtime-cjs-dev': {  entry: resolve('web/entry-runtime.js'),  dest: resolve('dist/vue.runtime.common.dev.js'),  format: 'cjs',  env: 'development',  banner }

在alias.js下設(shè)置了別名路徑

我們先介紹src/platforms

里面有web和weex 分別的web和weex入口

在web文件下是CommonJS，ES Modules，UMD關(guān)于js引入類型，server的打包入口

打開web/entry-runtime.js

引入

import Vue from './runtime/index'export default Vue

打開./runtime/index

import Vue from 'core/index' Vue.prototype.$mount = function ( el?: string | Element, hydrating?: boolean): Component { el = el && inBrowser ? query(el) : undefined return mountComponent(this, el, hydrating)}export default Vue

在vue原型上添加了mount方法

處理了devtools，沒有安裝提醒安裝devtools

給了這句提示dev環(huán)境提示

You are running Vue in development mode.Make sure to turn on production mode when deploying for production.See more tips at https://vuejs.org/guide/deployment.html

platforms目錄夾講解完畢

core目錄

打開core/instance/index

映入眼前的是

function Vue (options) { if (process.env.NODE_ENV !== 'production' &&  !(this instanceof Vue) ) {  warn('Vue is a constructor and should be called with the `new` keyword') } this._init(options)} initMixin(Vue)stateMixin(Vue)eventsMixin(Vue)lifecycleMixin(Vue)renderMixin(Vue) export default Vue

先執(zhí)行的是initMixin(Vue)

打開init

export function initMixin (Vue) { Vue.prototype._init = function (options?: Object) {  const vm = this  // a uid   vm._uid = uid++     let startTag, endTag  /* istanbul ignore if */  if (process.env.NODE_ENV !== 'production' && config.performance && mark) {   startTag = `vue-perf-start:${vm._uid}`   endTag = `vue-perf-end:${vm._uid}`   mark(startTag)  }   // a flag to avoid this being observed  vm._isVue = true  // 處理傳入的options  // merge options  if (options && options._isComponent) {   // optimize internal component instantiation   // since dynamic options merging is pretty slow, and none of the   // internal component options needs special treatment.   initInternalComponent(vm, options)  } else {    // 傳入的options,默認(rèn)的options一起合并掛載到vm.$options上   vm.$options = mergeOptions(    resolveConstructorOptions(vm.constructor),    options || {},    vm   )  }  /* istanbul ignore else */  if (process.env.NODE_ENV !== 'production') {   // 代理   initProxy(vm)  } else {   vm._renderProxy = vm  }  // 生命周期  initLifecycle(vm)   // emit on 事件  initEvents(vm)  // 處理render vdom  initRender(vm)  callHook(vm, 'beforeCreate')  // 處理Injections  initInjections(vm) // resolve injections before data/props  // 雙向數(shù)據(jù)綁定，監(jiān)聽訂閱  initState(vm)  initProvide(vm) // resolve provide after data/props  callHook(vm, 'created')     /* istanbul ignore if */  if (process.env.NODE_ENV !== 'production' && config.performance && mark) {   vm._name = formatComponentName(vm, false)   mark(endTag)   measure(`vue ${vm._name} init`, startTag, endTag)  }  // 渲染到dom  if (vm.$options.el) {   vm.$mount(vm.$options.el)  } }}