学习Vue2的贡献指南

其目的是为那些想要为 Vue.js 项目贡献代码、报告问题或参与项目开发的开发者提供详细的指引,确保贡献流程的规范性和高效性。

总体介绍

  • 提醒开发者在提交贡献之前,需要阅读一系列的准则,包括行为准则、问题报告准则、拉取请求准则、开发环境设置和项目结构等。

具体准则部分

问题报告准则

  • 要求开发者始终使用 new-issue.vuejs.org/ 来创建新问题,确保问题报告的标准化和规范化,便于项目维护者统一管理和处理。

拉取请求准则

  • 分支管理 :明确指出master分支仅为最新稳定版本的快照,所有开发工作应在专用分支上进行,避免直接向master分支提交拉取请求,确保开发过程的稳定性和可追溯性。
  • 工作目录 :要求开发者在src文件夹中进行工作,并且不要将dist文件夹的更改提交到代码库中,以保持代码库的整洁和一致性。
  • 提交方式:允许开发者在处理拉取请求时进行多次小提交,GitHub 会在合并前自动将这些小提交压缩成一个大提交,方便代码审查和管理。
  • 测试要求 :强调在提交拉取请求前,必须确保npm test命令能够通过,即完成代码的语法检查、类型检查、单元测试和端到端测试,提高代码质量。
  • 新增特性:新增特性时需要添加相应的测试用例,并提供充分的理由说明添加该特性的必要性。建议先创建一个建议问题并获得批准后再进行开发。
  • 修复 bug :在修复特定问题时,要求在拉取请求标题中添加(fix #xxxx[,#xxxx])来引用问题编号,同时在拉取请求中提供详细的 bug 描述,最好能提供实时演示,并在适用的情况下添加适当的测试覆盖。

开发环境设置

  • 环境要求:明确开发者需要安装 Node.js 8 + 版本、Java 运行环境(用于端到端测试时运行 Selenium 服务器)和 yarn 包管理器。
  • 依赖安装 :克隆仓库后,使用yarn命令安装项目依赖。
  • 提交规范 :提交消息应遵循特定的提交消息规范,以便自动生成更新日志。如果开发者不熟悉该规范,可以使用npm run commit命令通过交互式 CLI 生成合适的提交消息。
  • 常用脚本 :提供了一些常用的 NPM 脚本:
    • npm run dev用于监听并自动重新构建dist/vue.js文件,
    • npm run dev:test用于监听并自动重新运行 Chrome 中的单元测试,
    • npm run build用于构建所有分发文件,包括 NPM 包,
    • npm test用于运行完整的测试套件,包括语法检查和类型检查等。

项目结构

详细介绍了项目的各个目录和文件的作用,帮助开发者快速了解项目的组织结构,便于定位和修改代码:

  • scripts:包含与构建相关的脚本和配置文件。通常情况下,你不需要修改这些文件。不过,熟悉以下文件会对你有所帮助:

    • scripts/alias.js:整个源代码和测试中使用的模块导入别名。
    • scripts/config.js :包含 dist/ 目录下所有文件的构建配置。如果你想查找某个 dist 文件的入口源文件,可以查看此文件。
  • dist :包含用于分发的构建文件。请注意,这个目录仅在发布版本时才会更新,它不会反映开发分支中的最新更改。有关 dist 文件的更多详细信息,请参阅 dist/README.md

  • flow:包含 Flow 的类型声明。这些声明会全局加载,你会在普通源代码的类型注解中看到它们的使用。

  • packages :包含 vue-server-renderervue-template-compiler,它们作为单独的 NPM 包进行分发。这些包会根据源代码自动生成,并且始终与主 vue 包保持相同的版本。

  • test:包含所有测试。单元测试使用 Jasmine 编写,并通过 Karma 运行;端到端(e2e)测试使用 Nightwatch.js 编写和运行。

  • src:包含源代码。代码库使用 ES2015 编写,并带有 Flow 类型注解。

    • compiler :包含将模板转换为渲染函数的编译器代码。

      编译器由三部分组成:解析器(将模板字符串转换为元素抽象语法树(AST))、优化器(检测静态树以进行虚拟 DOM 渲染优化)和代码生成器(根据元素 AST 生成渲染函数代码)。请注意,代码生成器直接从元素 AST 生成代码字符串,这样做是为了减小代码体积,因为编译器会在独立构建版本中被发送到浏览器。

    • core :包含通用的、与平台无关的运行时代码。

      Vue 2.0 的核心是与平台无关的。也就是说,core 目录下的代码可以在任何 JavaScript 环境中运行,无论是浏览器、Node.js 还是原生应用中的嵌入式 JavaScript 运行时。

      • observer:包含与响应式系统相关的代码。
      • vdom:包含与虚拟 DOM 元素创建和补丁相关的代码。
      • instance:包含 Vue 实例的构造函数和原型方法。
      • global-api:包含 Vue 的全局 API。
      • components:包含通用的抽象组件。
    • server:包含与服务器端渲染相关的代码。

    • platforms :包含特定平台的代码。

      用于分发构建的入口文件位于各自的平台目录中。

      每个平台模块包含三个部分:编译器、运行时和服务器,分别对应上述三个目录。每个部分都包含特定平台的模块和实用工具,这些模块和工具会在特定平台的入口文件中被导入并注入到核心模块中。例如,实现 v-bind:class 背后逻辑的代码位于 platforms/web/runtime/modules/class.js,该文件在 entries/web-runtime.js 中被导入,并用于创建特定于浏览器的虚拟 DOM 补丁函数。

    • sfc :包含单文件组件(.vue 文件)的解析逻辑。这部分逻辑在 vue-template-compiler 包中使用。

    • shared:包含整个代码库共享的实用工具。

    • types:包含 TypeScript 类型定义。

    • test:包含类型定义测试。

相关推荐
Json_3 分钟前
使用vue2技术写了一个纯前端的静态网站商城-鲜花销售商城
前端·vue.js·html
ohMyGod_12317 分钟前
Vue如何实现样式隔离
前端·javascript·vue.js
Abadbeginning29 分钟前
vue3后台管理框架geeker admin 横向布局(了解)
前端·javascript·vue.js
OpenTiny社区31 分钟前
直播分享|TinyVue 多端实战与轻量图标库分享
前端·vue.js·开源
Data_Adventure38 分钟前
使用CLINE高效完成日常开发:添加csv资源预览功能
javascript·vue.js·cline
阳火锅1 小时前
都2025年了,你还在提交按钮上面用防抖函数?
前端·vue.js·面试
古夕1 小时前
vue 3.x 响应式系统的实现
javascript·vue.js
梦想CAD控件1 小时前
(AI帮忙网页cad二次开发)MxCAD多行文本扩展
前端·javascript·vue.js
周星星日记1 小时前
13.vue3中异步组件defineAsyncComponent实现原理
前端·vue.js·面试
方方洛2 小时前
组件是怎样写的(1):虚拟列表-VirtualList
前端·vue.js·react.js