1. 首页
  2. Vuejs

尝鲜Vue3之一:浏览器中如何断点调试Vue3 源码

目录

克隆Vue3源码

Vue源码位置

github.com/vuejs/vue-n…


git clone git@github.com:vuejs/vue-next.git //JS中文网 – 前端进阶资源分享 www.javascriptc.com

安装依赖编译源码

进入代码目录并安装依赖


yarn yarn dev //JS中文网 – 前端进阶资源分享 www.javascriptc.com

尝鲜Vue3之一:浏览器中如何断点调试Vue3 源码

尝鲜Vue3之一:浏览器中如何断点调试Vue3 源码

测试API

  • 做一个简单的Helloworld测试 我们就先试试原有的vue2 的Api还可不可以使用,其实vue3中提倡使用composite-api也就是函数定义风格的api,原有vue偏向于配置配置风格我们把它统称为options风格 我们在根目录上创建文件夹

尝鲜Vue3之一:浏览器中如何断点调试Vue3 源码

options.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../../packages/vue/dist/vue.global.js"></script>
</head>

<body>
    <div id='app'></div>
    <script>
        const App = {
            template: `
                <button @click='click'>{{message}}</button>
            `,
            data() {
                return {
                    message: 'Hello Vue 3!!'
                }
            },
            methods: {
                click() {
                    console.log('click ....', this.message)
                    this.message = this.message.split('').reverse().join('')
                }
            }
        }
        let vm = Vue.createApp().mount(App, '#app')
        // console.log(vm)
    </script>
</body>

</html>
//JS中文网 – 前端进阶资源分享 www.javascriptc.com

其实这个代码就是vue2官网的代码 拿过来可以正常运行 我们再试验一下vue3的composition api


<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="../../packages/vue/dist/vue.global.js"></script> </head> <body> <div id="app"></div> <script> const { createApp, reactive, computed, effect } = Vue const MyComponent = { template: ` <button @click="click"> {{ state.message }} </button> `, setup() { const state = reactive({ message:'Hello Vue 3!!' }) effect(() => { console.log('state change ', state.message) }) function click() { state.message = state.message.split('').reverse().join('') } return { state, click } } } createApp().mount(MyComponent, '#app') </script> </body> </html> //JS中文网 – 前端进阶资源分享 www.javascriptc.com

直接通过浏览器就可以打开本地文件

尝鲜Vue3之一:浏览器中如何断点调试Vue3 源码

可以试一下点击的效果 接下来如果你要debug一下源码的时候你会发现代码是经过打包的无法直接在源码上打断点调试

尝鲜Vue3之一:浏览器中如何断点调试Vue3 源码

添加SourceMap文件

为了能在浏览器中看到源码 并能够断点调试 需要再打包后代码中添加sourcemap

  • rollup.config.js

// rollup.config.js line:104左右 output.sourcemap = true //JS中文网 – 前端进阶资源分享 www.javascriptc.com

尝鲜Vue3之一:浏览器中如何断点调试Vue3 源码

  • 在tsconfig.json中配置sourcemap输出

JS中文网 – 前端进阶资源教程 www.javascriptC.com
一个致力于帮助开发者用代码改变世界为使命的平台,每天都可以在这里找到技术世界的头条内容


// tsconfig.json { "compilerOptions": { "baseUrl": ".", "outDir": "dist", "sourceMap": true, // ----------这里这里--------- "target": "esnext", "module": "esnext", "moduleResolution": "node", "allowJs": false, "noUnusedLocals": true, "strictNullChecks": true, "noImplicitAny": true, "noImplicitThis": true, "experimentalDecorators": true, "resolveJsonModule": true, "esModuleInterop": true, "removeComments": false, "jsx": "react", "lib": ["esnext", "dom"], "types": ["jest", "node"], "rootDir": ".", "paths": { "@vue/shared": ["packages/shared/src"], "@vue/runtime-core": ["packages/runtime-core/src"], "@vue/runtime-dom": ["packages/runtime-dom/src"], "@vue/runtime-test": ["packages/runtime-test/src"], "@vue/reactivity": ["packages/reactivity/src"], "@vue/compiler-core": ["packages/compiler-core/src"], "@vue/compiler-dom": ["packages/compiler-dom/src"], "@vue/server-renderer": ["packages/server-renderer/src"], "@vue/template-explorer": ["packages/template-explorer/src"] } }, "include": [ "packages/global.d.ts", "packages/runtime-dom/jsx.d.ts", "packages/*/src", "packages/*/__tests__" ] } //JS中文网 – 前端进阶资源分享 www.javascriptc.com

再次运行


yarn dev 复制代码

尝鲜Vue3之一:浏览器中如何断点调试Vue3 源码

好了 同学们可以快乐的玩耍了。

不过要想真正了解源码 需要很多基础知识的储备譬如 ES6的proxy reflect、monorepo风格代码组织方式 后续文章中会一一解析3

目录

作者:全栈然叔
链接:https://juejin.im/post/6844903966359207950

看完两件小事

如果你觉得这篇文章对你挺有启发,我想请你帮我两个小忙:

  1. 关注我们的 GitHub 博客,让我们成为长期关系
  2. 把这篇文章分享给你的朋友 / 交流群,让更多的人看到,一起进步,一起成长!
  3. 关注公众号 「IT平头哥联盟」,公众号后台回复「资源」 免费领取我精心整理的前端进阶资源教程

JS中文网是中国领先的新一代开发者社区和专业的技术媒体,一个帮助开发者成长的社区,目前已经覆盖和服务了超过 300 万开发者,你每天都可以在这里找到技术世界的头条内容。欢迎热爱技术的你一起加入交流与学习,JS中文网的使命是帮助开发者用代码改变世界

本文著作权归作者所有,如若转载,请注明出处

转载请注明:文章转载自「 Js中文网 · 前端进阶资源教程 」https://www.javascriptc.com

标题:尝鲜Vue3之一:浏览器中如何断点调试Vue3 源码

链接:https://www.javascriptc.com/4075.html

« nginx支持http3.0
nginx入门学习»
Flutter 中文教程资源

相关推荐

QR code