Skip to content
/ vue Public

一个用来注释vue库的学习工程,后期也会结合官网更新,手动去本地开发维护vue!

License

Notifications You must be signed in to change notification settings

yxUED/vue

Repository files navigation

vue 代码注释

vue源码分析(2.1.7)

项目介绍

为了更好的在公司内部使用vue技术栈,我们尝试自己本地维护vue技术栈用到的核心库,在本地开发维护之前,我们需要去了解vue这个核心库的基本原理,而对已有的代码进行注释就是一个很好的学习方式。

关于vue

Vue 是一套用于构建用户界面的渐进式框架, 由Google华裔前端工程师 尤雨溪于2014年开源;

结构 目前版本(2.5.13)

如果想对源码有所了解请先把vue项目的介绍https://github.com/vuejs/vue/blob/dev/.github/CONTRIBUTING.md#development-setup

├── build --------------------------------- 构建相关的文件,一般情况下我们不需要动
├── dist ---------------------------------- 构建后文件的输出目录
├── examples ------------------------------ 存放一些使用Vue开发的应用案例
├── flow ---------------------------------- 类型声明,使用开源项目 [Flow](https://flowtype.org/)
├── package.json -------------------------- 不解释
├── test ---------------------------------- 包含所有测试文件
├── src ----------------------------------- 这个是我们最应该关注的目录,包含了源码
│   ├── entries --------------------------- 包含了不同的构建或包的入口文件
│   │   ├── web-runtime.js ---------------- 运行时构建的入口,输出 dist/vue.common.js 文件,不包含模板(template)到render函数的编译器,所以不支持 `template` 选项,我们使用vue默认导出的就是这个运行时的版本。大家使用的时候要注意
│   │   ├── web-runtime-with-compiler.js -- 独立构建版本的入口,输出 dist/vue.js,它包含模板(template)到render函数的编译器
│   │   ├── web-compiler.js --------------- vue-template-compiler 包的入口文件
│   │   ├── web-server-renderer.js -------- vue-server-renderer 包的入口文件
│   ├── compiler -------------------------- 编译器代码的存放目录,将 template 编译为 render 函数
│   │   ├── parser ------------------------ 存放将模板字符串转换成元素抽象语法树的代码
│   │   ├── codegen ----------------------- 存放从抽象语法树(AST)生成render函数的代码
│   │   ├── optimizer.js ------------------ 分析静态树,优化vdom渲染
│   ├── core ------------------------------ 存放通用的,平台无关的代码
│   │   ├── observer ---------------------- 反应系统,包含数据观测的核心代码
│   │   ├── vdom -------------------------- 包含虚拟DOM创建(creation)和打补丁(patching)的代码
│   │   ├── instance ---------------------- 包含Vue构造函数设计相关的代码
│   │   ├── global-api -------------------- 包含给Vue构造函数挂载全局方法(静态方法)或属性的代码
│   │   ├── components -------------------- 包含抽象出来的通用组件
│   ├── server ---------------------------- 包含服务端渲染(server-side rendering)的相关代码
│   ├── platforms ------------------------- 包含平台特有的相关代码
│   ├── sfc ------------------------------- 包含单文件组件(.vue文件)的解析逻辑,用于vue-template-compiler包
│   ├── shared ---------------------------- 包含整个代码库通用的代码

加入我们

注释vue核心库的这个事情,我们希望能有更多的人参与,大家一起共同学习进步,只要加入yxUED这个组,就可以直接把您注释的内容提交上来。

近期任务

  • 在readme中总结归纳vue的目录结构和各文件的作用,以及框架的设计思想;
  • 在各核心文件中把该文件的作用写清楚;
  • 注释各主要文件和核心函数和语句;
  • 发布整理过的vue到公司内私有仓库,逐步在各项目替换;
  • 将一些引用的库本地化,控制在10个以内;
  • 关注官网的更新日志,把bug修复和新特性及时同步过来;

如何注释

  • 先对着官网https://cn.vuejs.org/的教程看源码;
  • 后对着官网的API依次去源码找对应文件进行注释;
  • 最好把github的源码工程clone到本地,对着提交记录学习后把注释写到本工程;
  • 参照网上一些源码分析的教程或文章;

发布到内部仓库

  • 全局安装cnpm: npm install -g cnpm --registry=https://registry.npm.taobao.org
  • 设置全局cnpm的registry:cnpm set registry http://192.168.155.xx:7001
  • 登陆:cnpm login 分别输入用户名、密码和邮箱(第一次输入的密码即为初始密码)
  • 进入发布包的根目录,如: cd ~/mark/vue
  • 输入: cnpm init 生成一个package.json文件,主要项目名必须为加 @yx/ 前缀,如:@yx/vue
  • 执行:cnpm publish, 成功后在浏览器端http://192.168.155.xx:7002就能看到

About

一个用来注释vue库的学习工程,后期也会结合官网更新,手动去本地开发维护vue!

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published