1、下载最新源码,官网
git clone https://github.com/vuejs/core.git
2、下载pnpm
,这个是vue3使用的包管理工具,官网
curl -fsSL https://get.pnpm.io/install.sh | sh -
另:如果直接用yarn instal
会报错,因此要如上使用pnpm
$ yarn install
yarn install v1.22.19
info No lockfile found.
$ node ./scripts/preinstall.js
This repository requires using pnpm as the package manager for scripts to work properly.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.
3、安装依赖
pnpm install
这个执行完也不需要yarn install
了直接启动项目
4、config.json
添加sourceMap
// config.json
"dev": "node scripts/dev.js",
改为
"dev": "node scripts/dev.js --sourcemap",
5、启动项目
npm run serve
显示如下的时候就可以调试了:
6、浏览器打开后显示如下界面,点击package/example/
下任意文件(其实项目的任意文件都可以)
vue自带的example都是vue2的,于是测试一个简单的vue3 demo:
<script src="../../dist/vue.global.js"></script>
<div id="app">
<p>{{ state.counter }}</p>
</div>
<script>
const app = Vue.createApp({
setup() {
debugger
const original = Vue.reactive({
counter: 1
})
// 测试 isReadonly
const copy = readonly(original)
setInterval(() => {
state.counter++
}, 1000)
Vue.watch(() => state.counter, () => {})
return {
state
}
}
}).mount('#app')
</script>