1.1 調式環境配置–調式源代碼學習vue源碼
![在這裏插入圖片描述]()
第一步：github源碼下載
https://github.com/vuejs/vue
第二步：安裝基礎配置和安裝rollup
npm i
npm i rollup -g
第三步：在package.json的scripts dev中配置sourceMap(目的是和源碼產生映射關係方便打斷點)
"dev": "rollup -w -c scripts/config.js --sourcemap --environment TARGET:web-full-dev",
第四步：在命令行中輸入npm run build（在dist中可以看到vue.js 和他的映射vue.map.js）
npm run build
![在這裏插入圖片描述]()
第五步：在example中創立自己的調式文件test文件index.html
![在這裏插入圖片描述]()
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 引入vue靜態資源 -->
<script src="../../dist/vue.js"></script>
</head>
<body>
<div id="app">
<h1>初始化流程</h1>
<p>{{foo}}</p>
</div>
</body>
<script>
const app = new Vue(
{
el: '#app',
data() {
return {
foo: 'test'
}
},
}
)
</script>
</html>
第六步：在遊覽器中打開index.html 並且打上斷點並能清晰的調式和查看源碼的進程
![在這裏插入圖片描述]()
