配套学习博客:Vue.js 技术揭秘。
为了便于调试,我们需要如下操作:
首先,进入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 的。
针对简单的示例,那么直接在 examples/00-vue-analysis
目录中,通过一个个 .html
文件打断点进行调试。
对于涉及 sfc 的调试,则参看 examples/vue-cli-vue2.6-project
工程进行调试,对应于不同的调试需求,选择用打 tag 的方式记录不同的示例。
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:
- Become a backer or sponsor on Patreon.
- Become a backer or sponsor on Open Collective.
- One-time donation via PayPal or crypto-currencies.
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.
Sponsors via Open Collective
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.
Vue.js supports all browsers that are ES5-compliant (IE8 and below are not supported).
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 |
To check out live examples and docs, visit vuejs.org.
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.
Please make sure to read the Issue Reporting Checklist before opening an issue. Issues not conforming to the guidelines may be closed immediately.
Detailed changes for each release are documented in the release notes.
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!
Copyright (c) 2013-present, Yuxi (Evan) You