search

sleepyShen1989 / blog

MIT License
0 stars 0 forks source link

【源码】如何调试Vue3源码 #5

Open sleepyShen1989 opened 1 year ago

sleepyShen1989 commented 1 year ago
  1. 通过git clone下载vue源码（注意下载的版本）
  2. 安装pnpm, 通过pnpm install安装依赖（注意pnpm版本是否兼容当前node的版本）
  3. 在package.json的scripts中找到dev命令，添加--sourcemap选项
  4. pnpm dev 重新打包启动项目, 在packages/vue目录下会生成dist/vue.global.js
  5. packages/vue/examples目录下新建html，引用<script src="../../dist/vue.global.js"></script>进行代码编写
  6. 使用debugger进行调试
sleepyShen1989 commented 1 year ago

examples/demo/html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app"></div>

    <template id="my-app">
      <div>title</div>
      <p>{{ message }}</p>
      <button @click="changeMessage">修改message</button>
    </template>

    <script src="../../dist/vue.global.js"></script>
    <script>
      const { createApp } = Vue

      const App = {
        template: '#my-app',
        data() {
          return {
            message: "Hello World"
          }
        },
        methods: {
          changeMessage() {
            this.message = 'Hello New World'
          }
        }
      }
      debugger
      const app = createApp(App)
      app.mount("#app")
    </script>
</body>
</html>