搭建vue3源码调试环境
1.新建文件夹 名字为vue3源码解析
- 将文件夹拖入vscode或者用vscode打开文件夹
- 新建html文件,
- 并使用 ! tab 快捷键新建html文档
2.准备js代码
打开官方网址 cn.vuejs.org/guide/quick… 拷贝如下代码
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<div id="app">{{ message }}</div>
<script>
const { createApp } = Vue
createApp({
data() {
return {
message: 'Hello Vue!'
}
}
}).mount('#app')
</script>
加入上面准备好的index.html文件(如果觉得麻烦请直接拷贝下面html代码)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<div id="app">{{ message }}</div>
<script>
const { createApp } = Vue
createApp({
data() {
return {
message: 'Hello Vue!'
}
}
}).mount('#app')
</script>
</body>
</html>
此时index.html应该可以运行起来了,右击 Open with Liver Server,可以查看运行结果
3.使用本地的vue3库
因为上面的vue3库是使用cdn引入的,不利于源码进行本地调试,所以在本地使用vue3库.
- 复制上述的 unpkg.com/vue@3/dist/… 网址,粘贴到浏览器,得到源码,
- 然后command A (window快捷键应该是control A) 全选,复制所有代码到粘贴板
- 在index.html下面新建vue3.js 文件,并将上面复制的代码,粘贴到vue.js 文件里面,修改src地址为 './vue3.js'
最后整个html代码为
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="./vue3.js"></script>
<div id="app">{{ message }}</div>
<script>
const { createApp } = Vue
createApp({
data() {
return {
message: 'Hello Vue!'
}
}
}).mount('#app')
</script>
</body>
</html>
4. 进行调试
右击 Open with Liver Server,在浏览器运行
- 打开google开发者工具,
- 点击图中 1
- 然后点击2
- 打上断点3
- 刷新页面
- 就可以调试了
点击4,就可以进入vue3源码进行调试了
