一,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 源码分析—— 目录结构的更多相关文章

  1. vue源码解读-目录结构

    目录结构 ├── scripts ------------------------------- 构建相关的文件,一般情况下我们不需要动│ ├── git-hooks ---------------- ...

  2. Vue源码之目录结构

    Vue版本:2.6.9 源码结构图 ├─ .circleci // 包含CircleCI持续集成/持续部署工具的配置文件 ├─ .github // 项目相关的说明文档,上面的说明文档就在此文件夹 ├ ...

  3. SQLMAP源码分析-目录结构

    -----------------------------------------------------------------------------│  README.md│  sqlmap.c ...

  4. [Vue源码分析] v-model实现原理

    最近小组有个关于vue源码分析的分享会,提前准备一下… 前言:我们都知道使用v-model可以实现数据的双向绑定,及实现数据的变化驱动dom的更新,dom的更新影响数据的变化.那么v-model是怎么 ...

  5. Vue源码分析(一) : new Vue() 做了什么

    Vue源码分析(一) : new Vue() 做了什么 author: @TiffanysBear 在了解new Vue做了什么之前,我们先对Vue源码做一些基础的了解,如果你已经对基础的源码目录设计 ...

  6. 前端Vue 源码分析-逻辑层

    Vue 源码分析-逻辑层 预期的效果: 监听input的输入,input在输入的时候,会触发 watch与computed函数,并且会更新原始的input的数值.所以直接跟input相关的处理就有3处 ...

  7. Vue源码分析(二) : Vue实例挂载

    Vue源码分析(二) : Vue实例挂载 author: @TiffanysBear 实例挂载主要是 $mount 方法的实现,在 src/platforms/web/entry-runtime-wi ...

  8. android源码的目录结构

    android源码的目录结构 [以下网络摘抄] |-- Makefile ! l/ a5 n% S% @- `0 d# z# a$ P4 V3 o7 R|-- bionic              ...

  9. 【Zookeeper】源码分析目录

    Zookeeper源码分析目录如下 1. [Zookeeper]源码分析之序列化 2. [Zookeeper]源码分析之持久化(一)之FileTxnLog 3. [Zookeeper]源码分析之持久化 ...

随机推荐

  1. Python基础(一) - 数据类型及运算符

    基本数据类型 整数(int) 浮点数(float) 字符串 以' '或" " 括起来的任意文本.  a. 如果'本身也是字符,可以用" "括起来    prin ...

  2. <pre> <textarea> <code>标签区别

    这篇文章里面放的大都是我自己写程序的时候遇到的一些小问题,其实都是自己没有掌握的点,别人看起来应该很简单啦,但写下来能提醒自己,也能鼓励一下自己,这条路也不好走哇. <pre> <t ...

  3. iOS中基于WebView的HTML网页离线访问技术的实现

    其实就是MVC模式,视图在在线.离线时可以共用,控制器在在线时是由服务器端实现的,而离线时则是由本地Obj-C代码实现.具体实现方式为采用Mongoose实现. 代码为: mongoose.h mon ...

  4. windows7x64系统中配置mysql5.7.17为本地开发环境(win2008类似)

    1. 下载mysql压缩包mysql-5.7.17-winx64.ziphttps://cdn.mysql.com//Downloads/MySQL-5.7/mysql-5.7.17-winx64.z ...

  5. mac下 安装tomcat 后项目无法启动以及 错误 找不到或无法加载主类

    按照网上的步骤,在mac上安装tomcat后,写个简单的测试类报错:错误 找不到或无法加载主类 Class JavaLaunchHelper is implemented in both /Libra ...

  6. Halo 的缔造者们在忙什么?

    如果你自认为是一名主机游戏玩家,就一定知道 Halo.自 2001 年首代作品问世至今,十多年的磨炼已使得『光环』成为世界顶级的 FPS 游戏之一.<光环4>的推出,更让系列走向一个重要的 ...

  7. 转自csdn:计算机启动过程

    启动第一步--加载BIOS 当你打开计算机电源,计算机会首先加载BIOS信 息,BIOS信息是如此的重要,以至于计算机必须在最开始就找到它.这是因为BIOS中 包含了CPU的相关信息.设备启动顺序信息 ...

  8. iOS开发之UIView

    在iPhone里你能看到的.摸到的,都是UIView. 视图坐标系统: UIKit中的坐标都是基于这样的坐标系统:以左上角为坐标的原点,原点向下和向右为坐标轴方向. 坐标值由浮点数来表示,内容的布局和 ...

  9. Java遇到的问题、错误——持续更新

    内容:dead code.关于eclipse没有js代码提示的解决 持续更新 ######################################################## dead ...

  10. vue 项目搭建笔记1

    1.首先安装node.js(傻瓜式安装,安装路径默认C盘) 2.打开node.js command prompt 3.进入想放项目的文件夹.如D:  -->回车 4.进入具体文件夹,如cd wo ...