Vue 源码分析—— 目录结构
一,Vue.js 的源码都是在src 目录下,其目录结构如下。
1.compiler 目录包含Vue.js 所有编译相关的代码。它包括把所有模板解析成ast 语法树, ast 语法树优化等功能。
2.core 目录 包含了Vue.js 的核心代码,包括内置组件,全局API封装,Vue 实例化,观察者,虚拟DOM, 工具函数等等。
(1) observer 相应系统,包含数据观测的核心代码。
(2) vdom 包含虚拟DOM 创建(creation)和打补丁(patching) 的代码
(3) instance 包含Vue 构建函数设计相关的代码
(4) global-api 包含给Vue 构造函数挂在全局(静态方法)或属性的代码
(5)components 包含抽象出来的通用组件
3.platform Vue.js 是一个跨平台的MVVM 框架,它可以跑在web上,可以跑在weex 跑在,native客户端上,platform 是Vue.js 的入口,2 个目录代表2主要入口,
分别打包成运行在web 上和weex 上的Vue.js
4.server Vue.js 2.0 支持了服务端渲染,所有服务端渲染相关的逻辑都在这个目录下,注意,这部部分代码是跑在服务端的Node.js, 不要和跑
在浏览器端的Vue.js 混为一谈。
(1)web web 平台
(1)entry-runtime.js 运行时构建的入口,不包含模板(template)到render 函数的编译器,所不支持template 选项
我们使用vue 默认导出的就是一个运行时的版本。
(2)entry-runtime-with-compiler.js 独立构建版本的入口,它在entry-runtime 的基础上添加了模板(template) 到render 函数的编译器
(3)entry-compiler.js vue-template-compiler 包的入口文件
(4)entry-server-renderer.js vue-server-renderer 包的入口文件
(5)entry-server-basic-renderer.js 输出 packages/vue-server-renderer/basic.js
(2) weex 混合应用
5.sfc 通常我们开发 Vue.js 都会借助 webpack 构建,然后通过.vue 单文件来编写组件。
6. shared Vue.js 会定义歇一下工具方法,这里定义的工具方法都是会陪浏览器端的Vue.js 和 服务端的Vue.js 所共享的。
二,配置文件
(1)package.json
(2)yarn.lock yarn 锁定文件
(3) .editorconfig 针对编辑器的编码风格配置的文件
(4) .flowconfig flow 的配置文件
(5).babelrc babel 配置文件
(6).eslintrc eslint 配置文件
(7).eslintignore eslint 忽略文件
(8).gitignore git 忽略文件
三,test 包含所有测试文件
四,packages 存放独立发布的包的目录
五,flow 类声明,检查器
六 ,examples 存放一些使用Vue 开发的应用案例
七,dist 构建后文件的 输入目录
八,scripts 构建相关我文件
Vue 源码分析—— 目录结构的更多相关文章
- vue源码解读-目录结构
目录结构 ├── scripts ------------------------------- 构建相关的文件,一般情况下我们不需要动│ ├── git-hooks ---------------- ...
- Vue源码之目录结构
Vue版本:2.6.9 源码结构图 ├─ .circleci // 包含CircleCI持续集成/持续部署工具的配置文件 ├─ .github // 项目相关的说明文档,上面的说明文档就在此文件夹 ├ ...
- SQLMAP源码分析-目录结构
-----------------------------------------------------------------------------│ README.md│ sqlmap.c ...
- [Vue源码分析] v-model实现原理
最近小组有个关于vue源码分析的分享会,提前准备一下… 前言:我们都知道使用v-model可以实现数据的双向绑定,及实现数据的变化驱动dom的更新,dom的更新影响数据的变化.那么v-model是怎么 ...
- Vue源码分析(一) : new Vue() 做了什么
Vue源码分析(一) : new Vue() 做了什么 author: @TiffanysBear 在了解new Vue做了什么之前,我们先对Vue源码做一些基础的了解,如果你已经对基础的源码目录设计 ...
- 前端Vue 源码分析-逻辑层
Vue 源码分析-逻辑层 预期的效果: 监听input的输入,input在输入的时候,会触发 watch与computed函数,并且会更新原始的input的数值.所以直接跟input相关的处理就有3处 ...
- Vue源码分析(二) : Vue实例挂载
Vue源码分析(二) : Vue实例挂载 author: @TiffanysBear 实例挂载主要是 $mount 方法的实现,在 src/platforms/web/entry-runtime-wi ...
- android源码的目录结构
android源码的目录结构 [以下网络摘抄] |-- Makefile ! l/ a5 n% S% @- `0 d# z# a$ P4 V3 o7 R|-- bionic ...
- 【Zookeeper】源码分析目录
Zookeeper源码分析目录如下 1. [Zookeeper]源码分析之序列化 2. [Zookeeper]源码分析之持久化(一)之FileTxnLog 3. [Zookeeper]源码分析之持久化 ...
随机推荐
- openlayers研究(一) 初始化流程
下载2.13.1.解压缩.根据readme解释,openlayers.js是一个压缩库,.light是一个图像显示的简化库,mobile顾名思义应该是应对移动设备的库.build里面有py写的打包工具 ...
- 【html/css】模态框的实现
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 毕向东_Java基础视频教程第20天_IO流(15~17)
第20天-15-IO流(打印输出流) 打印输出流:PrintWriter与PrintStream 两者的区别:Since JDK 1.4 it's possible to specify the ch ...
- Spring Cloud中,Eureka常见问题总结
Spring Cloud中,Eureka常见问题总结. 1 eureka.environment: 指定环境 参考文档: 1 eureka.datacenter: 指定数据中心 参考文档: 使用配置项 ...
- Linux常用基本指令——文件处理命令
书籍方面的推荐就不做介绍,免得别人说我有广告嫌疑.大家可以直接上百度,书籍和视频遍地都是,Linux这些方面的知识都是自己在学习视频和看书的总结,内容上可能会不完美.如果有更多的见解,欢迎直接评论. ...
- Django中请求的生命周期 和 FBV模式和CBV模式
Django的生命周期就是你的 一个请求所发生的整个流程 Django的生命周期内到底发生了什么呢?? . 当用户在浏览器中输入url时,浏览器会生成请求头和请求体发给服务端 请求头和请求体中会包含浏 ...
- 实现UIView的无限旋转动画(非CALayer动画)
实现UIView的无限旋转动画(非CALayer动画) 效果: 素材: 源码: // // ViewController.m // Animation // // Created by YouXian ...
- Excel开发之旅(三)——添加侧边工具栏
1. 添加自定义用户控件:选择项目添加新建项用户控件.修改文件名,点击添加即可. 2. 重复步骤1,再添加3个自定义控件,接下来我们在自定义用户控件上面添加一些工具箱组件 3. 由于我们添加的是侧边工 ...
- 内置模块之os
os模块主要对操作系统进行调用的接口 一.os模块常用方法和属性 os.getcwd() 获取当前工作目录,即当前python脚本工作的目录路径 os.chdir("d:") 改变 ...
- Mac远程连接服务器
方法一:ssh 方法二:command+K进入远程桌面,这种方式类似于windwos下的远程桌面