从入口开始
咱们之前提到过 Vue.js 构建过程，在 web 利用下，咱们来剖析 Runtime + Compiler 构建进去的 Vue.js，它的入口是 src/platforms/web/entry-runtime-with-compiler.js：
/* @flow */import config from 'core/config'import { warn, cached } from 'core/util/index'import { mark, measure } from 'core/util/perf'import Vue from './runtime/index'import { query } from './util/index'import { compileToFunctions } from './compiler/index'import { shouldDecodeNewlines, shouldDecodeNewlinesForHref } from './util/compat'const idToTemplate = cached(id => { const el = query(id) return el && el.innerHTML})const mount = Vue.prototype.$mountVue.prototype.$mount = function ( el?: string | Element, hydrating?: boolean): Component { el = el && query(el) /* istanbul ignore if */ if (el === document.body || el === document.documentElement) { process.env.NODE_ENV !== 'production' && warn( `Do not mount Vue to <html> or <body> - mount to normal elements instead.` ) return this } const options = this.$options // resolve template/el and convert to render function if (!options.render) { let template = options.template if (template) { if (typeof template === 'string') { if (template.charAt(0) === '#') { template = idToTemplate(template) /* istanbul ignore if */ if (process.env.NODE_ENV !== 'production' && !template) { warn( `Template element not found or is empty: ${options.template}`, this ) } } } else if (template.nodeType) { template = template.innerHTML } else { if (process.env.NODE_ENV !== 'production') { warn('invalid template option:' + template, this) } return this } } else if (el) { template = getOuterHTML(el) } if (template) { /* istanbul ignore if */ if (process.env.NODE_ENV !== 'production' && config.performance && mark) { mark('compile') } const { render, staticRenderFns } = compileToFunctions(template, { shouldDecodeNewlines, shouldDecodeNewlinesForHref, delimiters: options.delimiters, comments: options.comments }, this) options.render = render options.staticRenderFns = staticRenderFns /* istanbul ignore if */ if (process.env.NODE_ENV !== 'production' && config.performance && mark) { mark('compile end') measure(`vue ${this._name} compile`, 'compile', 'compile end') } } } return mount.call(this, el, hydrating)}/** * Get outerHTML of elements, taking care * of SVG elements in IE as well. */function getOuterHTML (el: Element): string { if (el.outerHTML) { return el.outerHTML } else { const container = document.createElement('div') container.appendChild(el.cloneNode(true)) return container.innerHTML }}Vue.compile = compileToFunctionsexport default Vue那么，当咱们的代码执行 import Vue from 'vue' 的时候，就是从这个入口执行代码来初始化 Vue， 那么 Vue 到底是什么，它是怎么初始化的，咱们来一探到底。
Vue 的入口
在这个入口 JS 的上方咱们能够找到 Vue 的起源：import Vue from './runtime/index'，咱们先来看一下这块儿的实现，它定义在 src/platforms/web/runtime/index.js 中：
import Vue from 'core/index'import config from 'core/config'import { extend, noop } from 'shared/util'import { mountComponent } from 'core/instance/lifecycle'import { devtools, inBrowser, isChrome } from 'core/util/index'import { query, mustUseProp, isReservedTag, isReservedAttr, getTagNamespace, isUnknownElement} from 'web/util/index'import { patch } from './patch'import platformDirectives from './directives/index'import platformComponents from './components/index'// install platform specific utilsVue.config.mustUseProp = mustUsePropVue.config.isReservedTag = isReservedTagVue.config.isReservedAttr = isReservedAttrVue.config.getTagNamespace = getTagNamespaceVue.config.isUnknownElement = isUnknownElement// install platform runtime directives & componentsextend(Vue.options.directives, platformDirectives)extend(Vue.options.components, platformComponents)// install platform patch functionVue.prototype.__patch__ = inBrowser ? patch : noop// public mount methodVue.prototype.$mount = function ( el?: string | Element, hydrating?: boolean): Component { el = el && inBrowser ? query(el) : undefined return mountComponent(this, el, hydrating)}// ...export default Vue这里要害的代码是 import Vue from 'core/index'，之后的逻辑都是对 Vue 这个对象做一些扩大，能够先不必看，咱们来看一下真正初始化 Vue 的中央，在 src/core/index.js 中：
import Vue from './instance/index'import { initGlobalAPI } from './global-api/index'import { isServerRendering } from 'core/util/env'import { FunctionalRenderContext } from 'core/vdom/create-functional-component'initGlobalAPI(Vue)Object.defineProperty(Vue.prototype, '$isServer', { get: isServerRendering})Object.defineProperty(Vue.prototype, '$ssrContext', { get () { /* istanbul ignore next */ return this.$vnode && this.$vnode.ssrContext }})// expose FunctionalRenderContext for ssr runtime helper installationObject.defineProperty(Vue, 'FunctionalRenderContext', { value: FunctionalRenderContext})Vue.version = '__VERSION__'export default Vue这里有 2 处要害的代码，import Vue from './instance/index' 和 initGlobalAPI(Vue)，初始化全局 Vue API（咱们稍后介绍），咱们先来看第一局部，在 src/core/instance/index.js 中：
Vue 的定义
import { initMixin } from './init'import { stateMixin } from './state'import { renderMixin } from './render'import { eventsMixin } from './events'import { lifecycleMixin } from './lifecycle'import { warn } from '../util/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在这里，咱们终于看到了 Vue 的庐山真面目，它实际上就是一个用 Function 实现的类，咱们只能通过 new Vue 去实例化它。
有些同学看到这不禁想问，为何 Vue 不必 ES6 的 Class 去实现呢？咱们往后看这里有很多 xxxMixin 的函数调用，并把 Vue 当参数传入，它们的性能都是给 Vue 的 prototype 上扩大一些办法（这里具体的细节会在之后的文章介绍，这里不开展），Vue 按性能把这些扩大扩散到多个模块中去实现，而不是在一个模块里实现所有，这种形式是用 Class 难以实现的。这么做的益处是十分不便代码的保护和治理，这种编程技巧也十分值得咱们去学习。
initGlobalAPI
Vue.js 在整个初始化过程中，除了给它的原型 prototype 上扩大办法，还会给 Vue 这个对象自身扩大全局的静态方法，它的定义在 src/core/global-api/index.js 中：
export function initGlobalAPI (Vue: GlobalAPI) { // config const configDef = {} configDef.get = () => config if (process.env.NODE_ENV !== 'production') { configDef.set = () => { warn( 'Do not replace the Vue.config object, set individual fields instead.' ) } } Object.defineProperty(Vue, 'config', configDef) // exposed util methods. // NOTE: these are not considered part of the public API - avoid relying on // them unless you are aware of the risk. Vue.util = { warn, extend, mergeOptions, defineReactive } Vue.set = set Vue.delete = del Vue.nextTick = nextTick Vue.options = Object.create(null) ASSET_TYPES.forEach(type => { Vue.options[type + 's'] = Object.create(null) }) // this is used to identify the "base" constructor to extend all plain-object // components with in Weex's multi-instance scenarios. Vue.options._base = Vue extend(Vue.options.components, builtInComponents) initUse(Vue) initMixin(Vue) initExtend(Vue) initAssetRegisters(Vue)}这里就是在 Vue 上扩大的一些全局办法的定义，Vue 官网中对于全局 API 都能够在这里找到，这里不会介绍细节，会在之后的章节咱们具体介绍到某个 API 的时候会具体介绍。有一点要留神的是，Vue.util 裸露的办法最好不要依赖，因为它可能常常会发生变化，是不稳固的。
总结
那么至此，Vue 的初始化过程根本介绍结束。这一节的目标是让同学们对 Vue 是什么有一个直观的意识，它实质上就是一个用 Function 实现的 Class，而后它的原型 prototype 以及它自身都扩大了一系列的办法和属性，那么 Vue 能做什么，它是怎么做的，咱们会在前面的章节一层层帮大家揭开 Vue 的神秘面纱。