Javascript

Vue源码的目录结构,每个文件的作用是什么,Vue是如何规划目录的?

本文主要是介绍Vue源码的目录结构,每个文件的作用是什么,Vue是如何规划目录的?,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

  ├── scripts ------------------------------- 构建相关的文件,一般情况下我们不需要动

  │ ├── git-hooks ------------------------- 存放git钩子的目录

  │ ├── alias.js -------------------------- 别名配置

  │ ├── config.js ------------------------- 生成rollup配置的文件

  │ ├── build.js -------------------------- 对 config.js 中所有的rollup配置进行构建

  │ ├── ci.sh ----------------------------- 持续集成运行的脚本

  │ ├── release.sh ------------------------ 用于自动发布新版本的脚本

  ├── dist ---------------------------------- 构建后文件的输出目录

  ├── examples ------------------------------ 存放一些使用Vue开发的应用案例

  ├── flow ---------------------------------- 类型声明,使用开源项目 [Flow](flowtype/)

  ├── packages ------------------------------ 存放独立发布的包的目录

  ├── test ---------------------------------- 包含所有测试文件

  ├── src ----------------------------------- 这个是我们最应该关注的目录,包含了源码

  │ ├── compiler -------------------------- 编译器代码的存放目录,将 template 编译为 render 函数

  │ ├── core ------------------------------ 存放通用的,与平台无关的代码

  │ │ ├── observer ---------------------- 响应系统,包含数据观测的核心代码

  │ │ ├── vdom -------------------------- 包含虚拟DOM创建(creation)和打补丁(patching)的代码

  │ │ ├── instance ---------------------- 包含Vue构造函数设计相关的代码

  │ │ ├── global-api -------------------- 包含给Vue构造函数挂载全局方法(静态方法)或属性的代码

  │ │ ├── components -------------------- 包含抽象出来的通用组件

  │ ├── server ---------------------------- 包含服务端渲染(server-side rendering)的相关代码

  │ ├── platforms ------------------------- 包含平台特有的相关代码,不同平台的不同构建的入口文件也在这里

  │ │ ├── web --------------------------- web平台

  │ │ │ ├── entry-runtime.js ---------- 运行时构建的入口,不包含模板(template)到render函数的编译器,所以不支持 `template` 选项,我们使用vue默认导出的就是这个运行时的版本。大家使用的时候要注意

  │ │ │ ├── entry-runtime-with-compiler.js -- 独立构建版本的入口,它在 entry-runtime 的基础上添加了模板(template)到render函数的编译器

  │ │ │ ├── entry-compiler.js --------- vue-template-compiler 包的入口文件

  │ │ │ ├── entry-server-renderer.js -- vue-server-renderer 包的入口文件

  │ │ │ ├── entry-server-basic-renderer.js -- 输出 packages/vue-server-renderer/basic.js 文件

  │ │ ├── weex -------------------------- 混合应用

  │ ├── sfc ------------------------------- 包含单文件组件(.vue文件)的解析逻辑,用于vue-template-compiler包

  │ ├── shared ---------------------------- 包含整个代码库通用的代码

  ├── package.json -------------------------- 不解释

  ├── yarn.lock ----------------------------- yarn 锁定文件

  ├── .editorconfig ------------------------- 针对编辑器的编码风格配置文件

  ├── .flowconfig --------------------------- flow 的配置文件

  ├── .babelrc ------------------------------ babel 配置文件

  ├── .eslintrc ----------------------------- eslint 配置文件

  ├── .eslintignore ------------------------- eslint 忽略配置

  ├── .gitignore ---------------------------- git 忽略配置

这篇关于Vue源码的目录结构,每个文件的作用是什么,Vue是如何规划目录的?的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!