搭建Vue2源码调试环境虽然Vue3成为了默认的版本，但是Vue2还是个人工作中的主流，所以趁着这段使用了vue2的后，

虽然Vue3成为了默认的版本，但是Vue2还是个人工作中的主流，所以趁着这段使用了vue2的后，开始学习Vue2的源码。既然是学习源码，则先从搭建一个调试环境开始。 第一步: 从github中下载vue.js： github.com/vuejs/vue

git clone https://github.com/vuejs/vue.git

第二步: 进入下载的目录, 执行yarn命令

cd vue
yarn

等包安装完成后,即使有报错也没有关系, 不影响我们搭建的环境

出现类似的报错, 可以忽略

需要注意的是, 如果本地没有安装rollup, 需要先在本地全局安装rollup

npm install -g rollup

还有存放文件的目录不要带有中文名称，否则一定为报错，这里是因为rollup-plugin-alias 对中文的处理不友好，改成英文即可。

第三步: 修改配置

先在package.json中修改script中的dev命令: 加上 sourcemap

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

然后执行yarn run dev, 启动项目, 这时候会显示打包后的文件

这时候我们创建自己的项目,开始调试代码

先创建如下目录debugTest, 然后创建我们的调试文件vueDebug.html :

<!DOCTYPE html>
<html>
  <head>
    <title>Vue.js</title>
    <!--引入vue-->
    <script src="../dist/vue.js"></script>
  </head>
  <body>
    <div id="demo">{{counter}}</div>
  </body>
</html>
<script>
    const app = new Vue({
        el: '#demo',
        data: {
            counter: 0
        }
    })
</script>

在上面的代码中, 引入打包的vue后, 浏览器打开我们的文件，就可以开始我们的代码调试了。

至此，我们有了自己的vue2源码环境的调试环境了，开始我们的源码学习之旅吧。