1. File structure
├ ─ ─ benchmarks -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- the benchmark test file ├ ─ ─ dist -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- build output directory file after ├ ─ ─ examples -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- for a number of applications using the Vue development case ├ ─ ─ flow -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- JS static type checking tools (Flow) (https://flowtype.org/), the type of statement vue2. The Flow of x with ├ ─ ─ package. The json ├ ─ ─ packages -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- Independent outside of the core code library ├ ─ ─ scripts -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - contains the scripts and configuration files related to build │ ├ ─ ─ alias. Js -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - Source module used to import the alias | ├ ─ ─ build. Js -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- build relevant documents, Usually we don't need to move │ ├ ─ ─ config. Js -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- the project build configuration ├ ─ ─ the SRC -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- source directory │ ├ ─ ─ Compiler -------------------------- Compiler code, Used to compile the template to render function │ │ ├ ─ ─ codegen -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- to deposit from the abstract syntax tree (AST) generated render function code │ │ ├ ─ ─ directives -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- directive defines v - on, v - bind, v - if implemented │ │ ├ ─ ─ optimizer. Js -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- static analysis tree, Optimize vdom rendering │ │ ├ ─ ─ parser -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- to store the template string into its elements abstract syntax tree code compiled [HTML] │ ├ ─ ─ the core -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- For gm, the core code │ │ ├ ─ ─ components -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - contains abstracting common component, Today, only keep alive - │ │ ├ ─ ─ global API -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- to the Vue constructor mount attributes of the global methods (static method) or code [global API, Vue. Use (), set (), delete ()] │ │ ├ ─ ─ the instance -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- the Vue constructor code associated with the prototype │ │ ├ ─ ─ the observer -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- Responsive implementation, including data observed at the core of the code │ │ ├ ─ ─ util -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - tools, Props. Js │ │ ├ ─ ─ vdom -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - the creation of virtual DOM and patching code │ ├ ─ ─ platforms -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- different platform-specific code │ │ ├ ─ ─ weex -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- weex platform support │ │ ├ ─ ─ the web -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- the web platform support │ │ │ ├ ─ ─ entry - runtime. Js -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - the runtime building entrance │ │ │ ├ ─ ─ Entry-runtime-with-compiler. js -- entrance to the independent build │ │ ├─ Entry-compiler. js --------------- ue- Template-compiler entrance file │ │ ├─ ├─ Entry-compiler. js │ ├ ─ ─ entry - server - the renderer. Js -- -- -- -- -- -- -- -- the vue - server - the renderer package entry documents │ ├ ─ ─ server -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- Server side rendering (server side rendering) related code │ ├ ─ ─ SFC -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - contains a single file components. Vue file parsing logic, Used in vue - the template - the compiler package │ ├ ─ ─ Shared -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- the code library general ├ ─ ─ the test -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- the test file ├ ─ ─ types -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- ts type declarationsCopy the codeBenchmarks are used primarily to verify performance, and to obtain some benchmark data that can be compared to other versions of the software, or other similar software. Benchmark is not usually used for correctness verification. Benchmark testing does not necessarily occur during the development of each release. It is possible that you will only run a Benchmark test once if there are major changes. So the frequency is much lower than unit tests.
2. Import the file
(1) The front-end project entry file is viewed from the package.json file.
You can find:
"scripts": {
"dev": "rollup -w -c scripts/config.js --environment TARGET:web-full-dev",
}
Copy the codeRollup is a wrapper for JS modules similar to WebPack. [email protected] used to use Webpack, but changed to rollup to make the packaging smaller and the initialization faster. The following is the author’s answer
Rollup is only used for building Vue release files and has no direct impact on user usage. Before using WebPack, there is still a small dynamic module loading mechanism, and each file is wrapped in a module function. The rollup package directly puts all the functions in the same function body by renaming the import binding... So the final file will be smaller, and the initialization will be ten milliseconds faster. After 1.0.10, the NPM package contains dist/vue.common.js - a single CommonJS file that was built after rollup. The package.json main points to this. If you package it in Webpack or Browserify, you get this file. Dist /vue.js and dist/vue.min.js - built files that can be directly used for <script> references SRC - source files, ES6 (currently only using module syntax). The esnext:main of package.json points to SRC /index.js. Packaged with JSPM or rollup, you get the ES6 source file. -- An actual change for users is that require('vue/ SRC/XXX ') is no longer a way to get vue modules directly, but this is not recommended.Copy the code(2) Go to the scripts/config.js file [command parameter: TARGET:web-full-dev]
Find the position of this parameter:
const builds = { ... // Runtime+compiler development build (Browser) 'web-full-dev': { entry: Resolve ('web/entry/runtime-with-compiler.js'),// import file dest: resolve('dist/vue.js'),// output file format: 'umd',// Compile mode: 'development',// environment alias: {he: './entity-decoder'},// alias banner // note at the front of each package, including: version, author, date},... }Copy the codeFormat: ES Modules, use ES6 template syntax to output CJS: CommonJs Module, follow CommonJs Module specification file output AMD: Umd: Supports output of files from the AMD Module specification, which can be directly using the script tag
(3) Access the web/ entry-Runtime-with-compiler. js file
This file is the SRC/platforms/web/entry – the runtime – with – compiler. Js file reason. Please check the scripts/alias js module into the alias file
const path = require('path') const resolve = p => path.resolve(__dirname, '.. /', p) module.exports = { vue: resolve('src/platforms/web/entry-runtime-with-compiler'), compiler: resolve('src/compiler'), core: resolve('src/core'), shared: resolve('src/shared'), web: resolve('src/platforms/web'), weex: resolve('src/platforms/weex'), server: resolve('src/server'), sfc: resolve('src/sfc') }Copy the codeSRC/platforms/web/entry – the runtime – with – compiler. Js content
import Vue from 'core/index'
Copy the code(4) Go to the core/index file
import Vue from './instance/index'
Copy the code(5) Enter the./instance/index file
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 VueCopy the codeThis constructor is actually called when new vue() is executed, so you can start looking at the code here!
