Vue源码解析之 源码调试

1,280 阅读1分钟

本文为原创文章,未获授权禁止转载,侵权必究!

本篇是 Vue 源码解析系列第 1 篇,关注专栏

前言

Vue源码解析系列是基于黄轶老师的 Vue.js 技术揭秘,如需更深入的了解 Vue 源码,请直接查看 Vue.js 技术揭秘。本系列基于 Vue 2.5.17-beta.0 版本分析,可直接前往下载。

使用步骤

// 根目录 
npm i 

// 安装依赖 
npm install rollup-plugin-alias@1.4.0 --save-dev 

// package.json 修改配置 末尾添加 --sourcemap 
"dev": "rollup -w -c scripts/config.js --environment TARGET:web-full-dev --sourcemap"

// dist文件下创建 html 文件 
index.html 

// 引入 dist/vue.js文件 
<body> 
    <div id="app">{{ msg }}</div> 
    <script src="./vue.js"></script> 
    <script> 
        const app = new Vue({ 
            el: '#app', 
            data() { 
                return { 
                    msg: 'hello world' 
                } 
            } 
        }) 
    </script>
</body> 

// 执行 npm run dev 

// 打开 index.html 文件 

// src 目录下打 debugger 进行调试

参考

Vue.js 技术揭秘

Vue 源码解析系列

  1. Vue源码解析之 源码调试
  2. Vue源码解析之 编译
  3. Vue源码解析之 数据驱动
  4. Vue源码解析之 组件化
  5. Vue源码解析之 合并配置
  6. Vue源码解析之 生命周期
  7. Vue源码解析之 响应式对象
  8. Vue源码解析之 依赖收集
  9. Vue源码解析之 派发更新
  10. Vue源码解析之 nextTick