-
git clone https://github.com/vuejs/core.git
-
安裝pnpm 工具，目前vue3是基于pnpm 進行構建專案的
-
執行pnpm install 命令，安裝依賴包，如果使用npm install會報錯：
npm ERR! code EUNSUPPORTEDPROTOCOL
npm ERR! Unsupported URL Type "workspace:": workspace:*
-
執行命令pnpm run dev ，即可在dist目錄下生成vue.global.js 檔案
-
在vue 目錄下面創建index.html檔案，
head 引入vue.global.js 檔案
<script src="https://www.cnblogs.com/mengxiangzhi/archive/2022/04/dist/vue.global.js" ></script>
body添加如下代碼
<body>
<div id="app">
</div>
<script>
Vue.createApp({
template:`
<button @click="add">add</button>
<ul> <li v-for="item in shop.lists" :key="item.id">{{item.text}}</li></ul>`,
setup(){
const shop=Vue.reactive({lists:[
{id:1,
text:'iphone'},
{id:2,
text:'xiaomi'}
]})
const add=()=>{
shop.lists.push({id:Math.floor(Math.random()*100),text:'phone'+Math.floor(Math.random()*100)})
}
return{
add,
shop
}
}
}).mount('#app')
</script>
</body>
-
使用VS Code 插件 Live Server，安裝好了之后，Vs Code 右下角會出現Go Live的文字，點擊Go live，會自動打開瀏覽器，如下圖
此時，我們可以進入開發者工具，點擊Sources 頁簽，即可以看到Vue3的代碼結構如下：
這時候我們就可以進行代碼除錯了，比如在packages/runtime-core/src/renderer.ts檔案patch 方法設定個斷點，再點擊界面上的add 按鈕：
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/468073.html
標籤：其他