instructions

  • First of all, this article is to read vue.js source code carding article, the article is segmented carding, recording some of their own understanding and general process; More importantly, I want to understand how vue.js 3.0 works before it is released.

  • If you have never seen or touched the vue.js source code, we recommend you refer to the vue.js parsing articles listed below, because these articles explain the project in more detail, and this article is only a few demos of a feature point or API implementation, trying to briefly outline the process.

    • Line-by-line source code analysis – Highly recommended
    • Vue. Js source code analysis
    • Vue. Js source code analysis

  • If you have a clear understanding of the project catalog and entry, it is recommended to directly look at the code, which is more efficient (if you find it difficult to understand, come back to read others’ explanation and try to understand).

  • The code mentioned in this article is basically an abbreviated version, please refer to vue.js-2.5.17 for details.

  • Any omissions and mistakes are welcome to correct and exchange.

Talk a little bit about engineering structures

The figure above gives a brief overview of the entire vue.js project directory.

  • How to make vue.js run, i.e. run locally (easy to read code)
  • How to start reading, that is, to find the entrance we care about (and then follow the train of thought)

Run locally (breakpoint debugging)

First findpackage.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:esm": "rollup -w -c scripts/config.js --environment TARGET:web-runtime-esm", "dev:test": "karma start test/unit/karma.dev.config.js", "dev:ssr": "rollup -w -c scripts/config.js --environment TARGET:web-server-renderer", "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 TARGET:weex-factory", "dev:weex:compiler": "rollup -w -c scripts/config.js --environment TARGET:weex-compiler ", "build": "node scripts/build.js", "build:ssr": "npm run build -- web-runtime-cjs,web-server-renderer", "build:weex": "npm run build -- weex", "test": "npm run lint && flow check && npm run test:types && npm run test:cover && npm run test:e2e -- --env phantomjs && npm run test:ssr && npm run test:weex", "test:unit": "karma start test/unit/karma.unit.config.js", }, ...Copy the code

For local running, breakpoint debugging, we only need to focus on the “dev” option; NPM run dev runs scripts/config.js to web-full-dev

config.jsA simple introduction


const builds = {

  ...

  // Runtime+compiler development build (Browser)
  'web-full-dev': {
    entry: resolve('web/entry-runtime-with-compiler.js'),
    dest: resolve('dist/vue.js'),
    format: 'umd'.env: 'development'.alias: { he: './entity-decoder' },
    banner
  },

  ...

};

function genConfig(name) {
  const opts = builds[name]; // Map the target configuration
  const config = {
    input: opts.entry,
    external: opts.external,
    plugins: [...]. .concat(opts.plugins || []),output: {
      file: opts.dest,
      format: opts.format,
      banner: opts.banner,
      name: opts.moduleName || 'Vue'
    },
    sourceMap: true // In order to debug the code cleanly, you are advised to enable it}; . return config; }if (process.env.TARGET) {
  module.exports = genConfig(process.env.TARGET); }...Copy the code

  • Add sourceMap: true to genconfig-config to map code inside a single file during breakpoint debugging.

  • Json “dev” mapping: entry: resolve(‘web/entry-runtime-with-compiler.js’)

    • "web"Alias configuration –alias.jsView the actual mapping toweb: resolve('src/platforms/web')
    • Finally locked the entry file:src/platforms/web/entry-runtime-with-compiler.js

Execute code and debug

  • Install dependencies: NPM I | yarn

  • Run: NPM run dev | yarn dev

    • After running, it will be indistTwo files are generated in the directoryvue.js vue.js.map

  • Introduce the generation of vue.js code, demo is as follows:


      
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>vue.js DEMO</title>
    <script src="dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <p>{{ message }}</p>
    </div>

    <script>
      new Vue({
        el: '#app',
        data: {
          message: 'hello vue.js'}});</script>
  </body>
</html>
Copy the code

Following -“Try reading Vue source code” before and after initialization ❓