代码调试

1. Vue.js内部运行机制流程图

2. 内容参看

配套学习博客：Vue.js 技术揭秘。

3. 调试前置工作

为了便于调试，我们需要如下操作：

首先，进入Vue的项目根目录，通过以下命令安装相关依赖（如果安装失败了则使用cnpm安装模块）：

$ npm install

其次，给 package.json 文件中的 dev 脚本中添加参数 --sourcemap（便于后续调试，内容如下），然后删除dist文件夹，重新输入npm run dev进行打包（打包的路径不能包含中文，否则可能打包失败）：

{
  scripts: {
    "dev": "rollup -w -c scripts/config.js --sourcemap --environment TARGET:web-full-dev",
  }
}

对使用rollup进行打包的 dev 脚本中参数解释如下：

-w：监听文件的变化，文件变化自动重新打包
-c：执行rollup打包时遵循的配置内容
--environment：打包后的Vue的使用版本

使用以上命令打包生成的目录结构如下：

然后，我们打开 examples/grid 文件夹（以此为例），更改 index.html 导入的Vue文件，将 vue.min.js 更改为上边打包生成的 vue.js，使用 http-server 或者 Live Server 打开该示例文件，结果如下：

最后，打开 Chrome 的调试工具中的 source面板（配置了 --sourcemap 才能看到如下的src文件夹），我们可以看到：

按F11，就可以进入Vue内部源码了，而不是 dist 文件夹中打包后的代码：

至此，调试准备工作完成！

另外，为了分析 Vue 的编译过程，这里选择 runtime + compiler版本（即TARGET为web-full-dev）的Vue的入口文件为：src/platforms/web/entry-runtime-with-compiler.js 作为分析入口文件。

还有就是，当我们在项目开发中执行 import Vue from 'vue' 的时候，就是从这个入口开始去执行代码来初始化 Vue 的。

4. 调试例子查看

针对简单的示例，那么直接在 examples/00-vue-analysis 目录中，通过一个个 .html 文件打断点进行调试。

对于涉及 sfc 的调试，则参看 examples/vue-cli-vue2.6-project 工程进行调试，对应于不同的调试需求，选择用打 tag 的方式记录不同的示例。

Supporting Vue.js

Vue.js is an MIT-licensed open source project with its ongoing development made possible entirely by the support of these awesome backers. If you'd like to join them, please consider:

What's the difference between Patreon and OpenCollective?

Funds donated via Patreon go directly to support Evan You's full-time work on Vue.js. Funds donated via OpenCollective are managed with transparent expenses and will be used for compensating work and expenses for core team members or sponsoring community events. Your name/logo will receive proper recognition and exposure by donating on either platform.

Special Sponsors

Platinum Sponsors

Platinum Sponsors (China)

Gold Sponsors

Sponsors via Open Collective

Platinum

Gold

Introduction

Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces. It is designed from the ground up to be incrementally adoptable, and can easily scale between a library and a framework depending on different use cases. It consists of an approachable core library that focuses on the view layer only, and an ecosystem of supporting libraries that helps you tackle complexity in large Single-Page Applications.

Browser Compatibility

Vue.js supports all browsers that are ES5-compliant (IE8 and below are not supported).

Ecosystem

Project	Status	Description
vue-router		Single-page application routing
vuex		Large-scale state management
vue-cli		Project scaffolding
vue-loader		Single File Component (`*.vue` file) loader for webpack
vue-server-renderer		Server-side rendering support
vue-class-component		TypeScript decorator for a class-based API
vue-rx		RxJS integration
vue-devtools		Browser DevTools extension

Documentation

To check out live examples and docs, visit vuejs.org.

Questions

For questions and support please use the official forum or community chat. The issue list of this repo is exclusively for bug reports and feature requests.

Issues

Please make sure to read the Issue Reporting Checklist before opening an issue. Issues not conforming to the guidelines may be closed immediately.

Changelog

Detailed changes for each release are documented in the release notes.

Stay In Touch

Contribution

Please make sure to read the Contributing Guide before making a pull request. If you have a Vue-related project/component/tool, add it with a pull request to this curated list!

Thank you to all the people who already contributed to Vue!

License

MIT

Copyright (c) 2013-present, Yuxi (Evan) You

License

xkyong/vue2.6-source-code-learning

ErrorLooks like something went wrong!

About

Resources

License

Code of conduct

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Languages

Error
Looks like something went wrong!

Packages