vue源码解析(一)--初始化都干了什么首先我们先下载vue的源码，npm i vue@2.6.14。我们以目前vue2

首先我们先下载vue的源码，npm i vue@2.6.14。我们以目前vue2最新版的来讲述。运行npm run build，发现在dist目录下有很多个版本的vue，那这些vue都有什么区别呢？下面一张图告诉你：

什么是编译器呢？

就是把模板字符串转换成render函数的方法。如下所示，template就是一个模板字符串，运行时的vue是不带编译器的，如果我们这么写，就会报错！

<div id="app"></div>
<script src="../../../dist/vue.js"></script>
<script>
    const vm = new Vue({
        el: '#app',
        template: `<div>{{ message }}<div>`,
        data: {
            message: '模板编译器'
        }
    })
</script>

了解了这些基础概念后，我们就准备开始调试源码了。

1.删除`dist`目录。

2.首先找到`package.json`。给`npm run dev`命令加上`sourcemap`。

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

3.我们自己demo就放在`examples`文件夹下。如图所示：

4.用live-sever启动写的demo页面。然后给实例化vue的地方加一个断点。我们就能进行调试了！

上述步骤帮助我们完成了vue源码调试的准备工作，接下来我们就要看看vue初始化都干了什么吧！

通过npm run dev命令，我们先找到vue的打包过程，是从哪个文件开始的！

通过调试scripts/config.js，我们找到了npm run dev的启动入口。

// 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
},