持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第 4 天，点击查看活动详情

theme: cyanosis

1.起步

start

番茄一直励志，阅读 vue2 的源码，今天开始行动啦！
没有目的就没有动力，先说说我的目标：
1. 了解底层原理，对 vue2 的各种 API 使用起来更加得心应手；
2. 提升个人的编程能力；
3. 升职加薪；
努力学习，加油！！

1. 拉取源码

首先拉取 vue2 源码， vuejs/vue-github

vue2 项目目前是的 main 分支上是 ts 重构的版本，为了降低阅读源码的难度，我选择了 2.6 这个分支(js 版本的)；

vue 的 2.6 分支，对应 vue 的版本即为 2.6.x

2. 查看项目结构

拉取完毕源码后，拿到一个项目，最先查看的是什么？当然是我们的 package.json，然后初步看看项目的文件结构。

2.1 `package.json`

{
  "name": "vue",
  "version": "2.6.14",
  "main": "dist/vue.runtime.common.js",
  "module": "dist/vue.runtime.esm.js",
  "scripts": {
    "dev": "rollup -w -c scripts/config.js --environment TARGET:web-full-dev",
    "dev:cjs":
      "rollup -w -c scripts/config.js --environment TARGET:web-runtime-cjs-dev",
    "dev:esm":
      "rollup -w -c scripts/config.js --environment TARGET:web-runtime-esm",
    "dev:test": "karma start test/unit/karma.dev.config.js",
    "dev:ssr":
      "rollup -w -c scripts/config.js --environment TARGET:web-server-renderer",
    "dev:compiler":
      "rollup -w -c scripts/config.js --environment TARGET:web-compiler ",
    "dev:weex":
      "rollup -w -c scripts/config.js --environment TARGET:weex-framework",
    "dev:weex:factory":
      "rollup -w -c scripts/config.js --environment TARGET:weex-factory",
    "dev:weex:compiler":
      "rollup -w -c scripts/config.js --environment TARGET:weex-compiler ",
    "build": "node scripts/build.js",
    "build:ssr": "npm run build -- web-runtime-cjs,web-server-renderer",
    "build:weex": "npm run build -- weex",
    //...省略部分
  },
 " devDependencies": {
    /*
    rollup
    
    shelljs
    lodash
    eslint
    babel
    //...省略部分
    */
  },
};

我精简了一下 package.json，由这些内容可以得到哪些信息？

名称： vue；
版本：2.6.14;
主入口：dist/vue.runtime.common.js；
Es Moudle入口：dist/vue.runtime.esm.js

开发依赖：

rollup
shelljs
lodash
eslint
babel
// 都比较熟系
// rollup 是类似于 webpack 的一个打包工具

可执行的脚本：

// 主要是围绕 rollup 和 node
// 优先查看一下 dev
"dev": "rollup -w -c scripts/config.js --environment TARGET:web-full-dev",
// 简单理解 执行`scripts/config.js` 传入参数 `TARGET:web-full-dev`

2.2 项目的结构：

vue 项目的文件结构

vue-2.6
├─.circleci     #配置
├─.github       #配置
├─benchmarks
├─dist          #构建后的文件
├─examples      #示例
├─flow          #Flow的类型声明
├─packages      #vue-server-render 和 vue-template-compiler, 他么作为单独的 NPM 包发布
├─scripts       #与构建相关的脚本和配置文件
├─src           #核心源代码
├─test          #所有测试代码
└─types         #类型定义测试

src 的文件目录

src
├── compiler        # 模板编译相关
├── core            # 通用的和平台无关的运行时代码
├── platforms       # 不同平台的支持
├── server          # 服务端渲染相关代码
├── sfc             # .vue 文件解析
├── shared          # 公用工具代码

题外话

记录一下生成目录树状图的方法

# window自带tree命令
tree ./  > xxx.txt  # 生成树状结构，保存到xxx.txt文件中

#但是上述的命令生成的树状图包含了子集目录,例如 node_modules中深层次的文件目录。无法做更多的配置、

#1. windows可以 `npm i-g tree-node-cli`  
# -L限制层级  -I排除文件  正常使用tree，但是为了防止和内置命令重复，可使用treee
treee -L 2 -I "node_modules"

#2. 如果只想得到一级文件目录，可以使用 `ls` 效果类似。

#3.linux可以 `yum install tree`  -L 限制文件层级
tree -L 2

vue2源码学习（1）起步