本文只针对想debug源码的人,虽然我也没看过(还不会用),也就才刚开始,以后或许会发文吧(佛系更新),结尾有惊喜。
步骤
- step zero
git clone https://github.com/vuejs/vue-next.git
- step one
npm install
- step two
执行完这个命令后,vue会在packages/vue/dist下生成一个vue.global.js
npm run dev
- step three 创建一个debug目录,然后创建index.html,引入刚才生成的文件
mkdir debug
touch index.html
- step four
然后在index.html写下如下内容就可以愉快的debug源码了,注意npm run dev启动的服务不要关,他会监听你在当前目录下所做的所有更改。
createApp入口在packages/runtime-core/src/apiCreateApp.ts下,有个createAppAPI函数,这个就是入口,他会返回一个createApp。
新手教程到此结束,然就可以尽情的debug了,如果要提交代码到自己仓库的话,注意commit规范,详细可以百度搜索commitlint。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
{{ count }}
<button @click="add">增加</button>
</div>
</body>
<script src="../packages/vue/dist/vue.global.js"></script>
<script>
const { createApp, reactive, ref } = Vue
const app = createApp({
setup () {
const count = ref(0)
const add = () => {
console.log(count)
count.value++
}
return {
count,
add
}
}
}).mount('#app')
console.log('app', app)
</script>
</html>
vue-next源码结构
├── CHANGELOG.md
├── LICENSE
├── README.md
├── api-extractor.json
├── example // 我写的(用于debug)
│ └── index.html
├── jest.config.js
├── package-lock.json
├── package.json
├── packages
│ ├── compiler-core // 编译核心
│ ├── compiler-dom // 编译dom
│ ├── compiler-sfc
│ ├── compiler-ssr // 编译ssr
│ ├── global.d.ts
│ ├── reactivity // 响应式
│ ├── runtime-core // 运行核心
│ ├── runtime-dom // 运行时的dom
│ ├── runtime-test // test
│ ├── server-renderer // ssr部分
│ ├── shared // dalao的工具库(dalao喜欢的命名,cli也是这个名字)
│ ├── size-check
│ ├── template-explorer
│ └── vue // build后生成的vue目录
├── rollup.config.js
├── scripts // 一些脚本
│ ├── bootstrap.js // 自动生成package.json、readme.md
│ ├── build.js // 打包
│ ├── checkYarn.js // 校验yarn版本
│ ├── dev.js
│ ├── release.js // 发布
│ ├── setupJestEnv.ts
│ ├── utils.js
│ └── verifyCommit.js // commit校验
├── test-dts // 一些测试
│ ├── README.md
│ ├── component.test-d.ts
│ ├── componentTypeExtensions.test-d.tsx
│ ├── defineComponent.test-d.tsx
│ ├── functionalComponent.test-d.tsx
│ ├── h.test-d.ts
│ ├── index.d.ts
│ ├── inject.test-d.ts
│ ├── reactivity.test-d.ts
│ ├── ref.test-d.ts
│ ├── setupHelpers.test-d.ts
│ ├── tsconfig.build.json
│ ├── tsconfig.json
│ ├── tsx.test-d.tsx
│ └── watch.test-d.ts
├── tsconfig.json
└── yarn.lock
完整目录
├── CHANGELOG.md
├── LICENSE
├── README.md
├── api-extractor.json
├── example
│ └── index.html
├── jest.config.js
├── package-lock.json
├── package.json
├── packages
│ ├── compiler-core
│ │ ├── LICENSE
│ │ ├── README.md
│ │ ├── __tests__
│ │ │ ├── __snapshots__
│ │ │ │ ├── codegen.spec.ts.snap
│ │ │ │ ├── compile.spec.ts.snap
│ │ │ │ ├── parse.spec.ts.snap
│ │ │ │ └── scopeId.spec.ts.snap
│ │ │ ├── codegen.spec.ts
│ │ │ ├── compile.spec.ts
│ │ │ ├── parse.spec.ts
│ │ │ ├── scopeId.spec.ts
│ │ │ ├── testUtils.ts
│ │ │ ├── transform.spec.ts
│ │ │ ├── transforms
│ │ │ │ ├── __snapshots__
│ │ │ │ │ ├── hoistStatic.spec.ts.snap
│ │ │ │ │ ├── transformExpressions.spec.ts.snap
│ │ │ │ │ ├── transformText.spec.ts.snap
│ │ │ │ │ ├── vFor.spec.ts.snap
│ │ │ │ │ ├── vIf.spec.ts.snap
│ │ │ │ │ ├── vModel.spec.ts.snap
│ │ │ │ │ ├── vOnce.spec.ts.snap
│ │ │ │ │ └── vSlot.spec.ts.snap
│ │ │ │ ├── hoistStatic.spec.ts
│ │ │ │ ├── noopDirectiveTransform.spec.ts
│ │ │ │ ├── transformElement.spec.ts
│ │ │ │ ├── transformExpressions.spec.ts
│ │ │ │ ├── transformSlotOutlet.spec.ts
│ │ │ │ ├── transformText.spec.ts
│ │ │ │ ├── vBind.spec.ts
│ │ │ │ ├── vFor.spec.ts
│ │ │ │ ├── vIf.spec.ts
│ │ │ │ ├── vModel.spec.ts
│ │ │ │ ├── vOn.spec.ts
│ │ │ │ ├── vOnce.spec.ts
│ │ │ │ └── vSlot.spec.ts
│ │ │ └── utils.spec.ts
│ │ ├── api-extractor.json
│ │ ├── index.js
│ │ ├── package.json
│ │ └── src
│ │ ├── ast.ts
│ │ ├── codegen.ts
│ │ ├── compile.ts
│ │ ├── errors.ts
│ │ ├── index.ts
│ │ ├── options.ts
│ │ ├── parse.ts
│ │ ├── runtimeHelpers.ts
│ │ ├── transform.ts
│ │ ├── transforms
│ │ │ ├── hoistStatic.ts
│ │ │ ├── noopDirectiveTransform.ts
│ │ │ ├── transformElement.ts
│ │ │ ├── transformExpression.ts
│ │ │ ├── transformSlotOutlet.ts
│ │ │ ├── transformText.ts
│ │ │ ├── vBind.ts
│ │ │ ├── vFor.ts
│ │ │ ├── vIf.ts
│ │ │ ├── vModel.ts
│ │ │ ├── vOn.ts
│ │ │ ├── vOnce.ts
│ │ │ └── vSlot.ts
│ │ ├── utils.ts
│ │ └── validateExpression.ts
│ ├── compiler-dom
│ │ ├── LICENSE
│ │ ├── README.md
│ │ ├── __tests__
│ │ │ ├── __snapshots__
│ │ │ │ └── index.spec.ts.snap
│ │ │ ├── index.spec.ts
│ │ │ ├── parse.spec.ts
│ │ │ └── transforms
│ │ │ ├── __snapshots__
│ │ │ │ ├── vModel.spec.ts.snap
│ │ │ │ └── vShow.spec.ts.snap
│ │ │ ├── ignoreSideEffectTags.spec.ts
│ │ │ ├── stringifyStatic.spec.ts
│ │ │ ├── transformStyle.spec.ts
│ │ │ ├── vHtml.spec.ts
│ │ │ ├── vModel.spec.ts
│ │ │ ├── vOn.spec.ts
│ │ │ ├── vShow.spec.ts
│ │ │ ├── vText.spec.ts
│ │ │ └── warnTransitionChildren.spec.ts
│ │ ├── api-extractor.json
│ │ ├── index.js
│ │ ├── package.json
│ │ └── src
│ │ ├── decodeHtml.ts
│ │ ├── decodeHtmlBrowser.ts
│ │ ├── errors.ts
│ │ ├── index.ts
│ │ ├── namedChars.json
│ │ ├── parserOptions.ts
│ │ ├── runtimeHelpers.ts
│ │ └── transforms
│ │ ├── ignoreSideEffectTags.ts
│ │ ├── stringifyStatic.ts
│ │ ├── transformStyle.ts
│ │ ├── vHtml.ts
│ │ ├── vModel.ts
│ │ ├── vOn.ts
│ │ ├── vShow.ts
│ │ ├── vText.ts
│ │ └── warnTransitionChildren.ts
│ ├── compiler-sfc
│ │ ├── LICENSE
│ │ ├── README.md
│ │ ├── __tests__
│ │ │ ├── __snapshots__
│ │ │ │ ├── compileScript.spec.ts.snap
│ │ │ │ ├── compileTemplate.spec.ts.snap
│ │ │ │ ├── cssVars.spec.ts.snap
│ │ │ │ ├── templateTransformAssetUrl.spec.ts.snap
│ │ │ │ └── templateTransformSrcset.spec.ts.snap
│ │ │ ├── compileScript.spec.ts
│ │ │ ├── compileStyle.spec.ts
│ │ │ ├── compileTemplate.spec.ts
│ │ │ ├── cssVars.spec.ts
│ │ │ ├── fixture
│ │ │ │ └── import.scss
│ │ │ ├── parse.spec.ts
│ │ │ ├── rewriteDefault.spec.ts
│ │ │ ├── templateTransformAssetUrl.spec.ts
│ │ │ ├── templateTransformSrcset.spec.ts
│ │ │ ├── templateUtils.spec.ts
│ │ │ └── utils.ts
│ │ ├── api-extractor.json
│ │ ├── package.json
│ │ └── src
│ │ ├── compileScript.ts
│ │ ├── compileStyle.ts
│ │ ├── compileTemplate.ts
│ │ ├── cssVars.ts
│ │ ├── index.ts
│ │ ├── parse.ts
│ │ ├── rewriteDefault.ts
│ │ ├── shims.d.ts
│ │ ├── stylePluginScoped.ts
│ │ ├── stylePluginTrim.ts
│ │ ├── stylePreprocessors.ts
│ │ ├── templateTransformAssetUrl.ts
│ │ ├── templateTransformSrcset.ts
│ │ ├── templateUtils.ts
│ │ └── warn.ts
│ ├── compiler-ssr
│ │ ├── LICENSE
│ │ ├── README.md
│ │ ├── __tests__
│ │ │ ├── ssrComponent.spec.ts
│ │ │ ├── ssrElement.spec.ts
│ │ │ ├── ssrInjectCssVars.spec.ts
│ │ │ ├── ssrPortal.spec.ts
│ │ │ ├── ssrScopeId.spec.ts
│ │ │ ├── ssrSlotOutlet.spec.ts
│ │ │ ├── ssrSuspense.spec.ts
│ │ │ ├── ssrText.spec.ts
│ │ │ ├── ssrVFor.spec.ts
│ │ │ ├── ssrVIf.spec.ts
│ │ │ ├── ssrVModel.spec.ts
│ │ │ ├── ssrVShow.spec.ts
│ │ │ └── utils.ts
│ │ ├── api-extractor.json
│ │ ├── package.json
│ │ └── src
│ │ ├── errors.ts
│ │ ├── index.ts
│ │ ├── runtimeHelpers.ts
│ │ ├── ssrCodegenTransform.ts
│ │ └── transforms
│ │ ├── ssrInjectCssVars.ts
│ │ ├── ssrInjectFallthroughAttrs.ts
│ │ ├── ssrTransformComponent.ts
│ │ ├── ssrTransformElement.ts
│ │ ├── ssrTransformSlotOutlet.ts
│ │ ├── ssrTransformSuspense.ts
│ │ ├── ssrTransformTeleport.ts
│ │ ├── ssrTransformTransitionGroup.ts
│ │ ├── ssrVFor.ts
│ │ ├── ssrVIf.ts
│ │ ├── ssrVModel.ts
│ │ └── ssrVShow.ts
│ ├── global.d.ts
│ ├── reactivity
│ │ ├── LICENSE
│ │ ├── README.md
│ │ ├── __tests__
│ │ │ ├── collections
│ │ │ │ ├── Map.spec.ts
│ │ │ │ ├── Set.spec.ts
│ │ │ │ ├── WeakMap.spec.ts
│ │ │ │ └── WeakSet.spec.ts
│ │ │ ├── computed.spec.ts
│ │ │ ├── effect.spec.ts
│ │ │ ├── reactive.spec.ts
│ │ │ ├── reactiveArray.spec.ts
│ │ │ ├── readonly.spec.ts
│ │ │ ├── ref.spec.ts
│ │ │ └── shallowReactive.spec.ts
│ │ ├── api-extractor.json
│ │ ├── index.js
│ │ ├── package.json
│ │ └── src
│ │ ├── baseHandlers.ts
│ │ ├── collectionHandlers.ts
│ │ ├── computed.ts
│ │ ├── effect.ts
│ │ ├── index.ts
│ │ ├── operations.ts
│ │ ├── reactive.ts
│ │ └── ref.ts
│ ├── runtime-core
│ │ ├── LICENSE
│ │ ├── README.md
│ │ ├── __tests__
│ │ │ ├── apiAsyncComponent.spec.ts
│ │ │ ├── apiCreateApp.spec.ts
│ │ │ ├── apiExpose.spec.ts
│ │ │ ├── apiInject.spec.ts
│ │ │ ├── apiLifecycle.spec.ts
│ │ │ ├── apiOptions.spec.ts
│ │ │ ├── apiSetupContext.spec.ts
│ │ │ ├── apiSetupHelpers.spec.ts
│ │ │ ├── apiTemplateRef.spec.ts
│ │ │ ├── apiWatch.spec.ts
│ │ │ ├── componentEmits.spec.ts
│ │ │ ├── componentProps.spec.ts
│ │ │ ├── componentPublicInstance.spec.ts
│ │ │ ├── componentSlots.spec.ts
│ │ │ ├── components
│ │ │ │ ├── BaseTransition.spec.ts
│ │ │ │ ├── KeepAlive.spec.ts
│ │ │ │ ├── Suspense.spec.ts
│ │ │ │ └── Teleport.spec.ts
│ │ │ ├── directives.spec.ts
│ │ │ ├── errorHandling.spec.ts
│ │ │ ├── h.spec.ts
│ │ │ ├── helpers
│ │ │ │ ├── createSlots.spec.ts
│ │ │ │ ├── renderList.spec.ts
│ │ │ │ ├── renderSlot.spec.ts
│ │ │ │ ├── resolveAssets.spec.ts
│ │ │ │ └── toHandlers.spec.ts
│ │ │ ├── hmr.spec.ts
│ │ │ ├── hydration.spec.ts
│ │ │ ├── misc.spec.ts
│ │ │ ├── rendererAttrsFallthrough.spec.ts
│ │ │ ├── rendererChildren.spec.ts
│ │ │ ├── rendererComponent.spec.ts
│ │ │ ├── rendererElement.spec.ts
│ │ │ ├── rendererFragment.spec.ts
│ │ │ ├── rendererOptimizedMode.spec.ts
│ │ │ ├── scheduler.spec.ts
│ │ │ ├── scopeId.spec.ts
│ │ │ ├── vnode.spec.ts
│ │ │ └── vnodeHooks.spec.ts
│ │ ├── api-extractor.json
│ │ ├── index.js
│ │ ├── package.json
│ │ ├── src
│ │ │ ├── apiAsyncComponent.ts
│ │ │ ├── apiComputed.ts
│ │ │ ├── apiCreateApp.ts
│ │ │ ├── apiDefineComponent.ts
│ │ │ ├── apiInject.ts
│ │ │ ├── apiLifecycle.ts
│ │ │ ├── apiSetupHelpers.ts
│ │ │ ├── apiWatch.ts
│ │ │ ├── component.ts
│ │ │ ├── componentEmits.ts
│ │ │ ├── componentOptions.ts
│ │ │ ├── componentProps.ts
│ │ │ ├── componentPublicInstance.ts
│ │ │ ├── componentRenderContext.ts
│ │ │ ├── componentRenderUtils.ts
│ │ │ ├── componentSlots.ts
│ │ │ ├── components
│ │ │ │ ├── BaseTransition.ts
│ │ │ │ ├── KeepAlive.ts
│ │ │ │ ├── Suspense.ts
│ │ │ │ └── Teleport.ts
│ │ │ ├── customFormatter.ts
│ │ │ ├── devtools.ts
│ │ │ ├── directives.ts
│ │ │ ├── errorHandling.ts
│ │ │ ├── featureFlags.ts
│ │ │ ├── h.ts
│ │ │ ├── helpers
│ │ │ │ ├── createSlots.ts
│ │ │ │ ├── renderList.ts
│ │ │ │ ├── renderSlot.ts
│ │ │ │ ├── resolveAssets.ts
│ │ │ │ ├── toHandlers.ts
│ │ │ │ ├── typeUtils.ts
│ │ │ │ └── useSsrContext.ts
│ │ │ ├── hmr.ts
│ │ │ ├── hydration.ts
│ │ │ ├── index.ts
│ │ │ ├── profiling.ts
│ │ │ ├── renderer.ts
│ │ │ ├── scheduler.ts
│ │ │ ├── vnode.ts
│ │ │ └── warning.ts
│ │ └── types
│ │ └── refBail.d.ts
│ ├── runtime-dom
│ │ ├── LICENSE
│ │ ├── README.md
│ │ ├── __tests__
│ │ │ ├── createApp.spec.ts
│ │ │ ├── customizedBuiltIn.spec.ts
│ │ │ ├── directives
│ │ │ │ ├── vCloak.spec.ts
│ │ │ │ ├── vModel.spec.ts
│ │ │ │ ├── vOn.spec.ts
│ │ │ │ └── vShow.spec.ts
│ │ │ ├── helpers
│ │ │ │ ├── useCssModule.spec.ts
│ │ │ │ └── useCssVars.spec.ts
│ │ │ ├── patchAttrs.spec.ts
│ │ │ ├── patchClass.spec.ts
│ │ │ ├── patchEvents.spec.ts
│ │ │ ├── patchProps.spec.ts
│ │ │ ├── patchStyle.spec.ts
│ │ │ └── rendererStaticNode.spec.ts
│ │ ├── api-extractor.json
│ │ ├── index.js
│ │ ├── package.json
│ │ ├── src
│ │ │ ├── components
│ │ │ │ ├── Transition.ts
│ │ │ │ └── TransitionGroup.ts
│ │ │ ├── directives
│ │ │ │ ├── vModel.ts
│ │ │ │ ├── vOn.ts
│ │ │ │ └── vShow.ts
│ │ │ ├── helpers
│ │ │ │ ├── useCssModule.ts
│ │ │ │ └── useCssVars.ts
│ │ │ ├── index.ts
│ │ │ ├── modules
│ │ │ │ ├── attrs.ts
│ │ │ │ ├── class.ts
│ │ │ │ ├── events.ts
│ │ │ │ ├── props.ts
│ │ │ │ └── style.ts
│ │ │ ├── nodeOps.ts
│ │ │ └── patchProp.ts
│ │ └── types
│ │ ├── jsx.d.ts
│ │ └── refBail.d.ts
│ ├── runtime-test
│ │ ├── LICENSE
│ │ ├── README.md
│ │ ├── __tests__
│ │ │ └── testRuntime.spec.ts
│ │ ├── api-extractor.json
│ │ ├── index.js
│ │ ├── package.json
│ │ └── src
│ │ ├── index.ts
│ │ ├── nodeOps.ts
│ │ ├── patchProp.ts
│ │ ├── serialize.ts
│ │ └── triggerEvent.ts
│ ├── server-renderer
│ │ ├── LICENSE
│ │ ├── README.md
│ │ ├── __tests__
│ │ │ ├── render.spec.ts
│ │ │ ├── ssrAttrFallthrough.spec.ts
│ │ │ ├── ssrDirectives.spec.ts
│ │ │ ├── ssrDynamicComponent.spec.ts
│ │ │ ├── ssrInterpolate.spec.ts
│ │ │ ├── ssrRenderAttrs.spec.ts
│ │ │ ├── ssrRenderList.spec.ts
│ │ │ ├── ssrScopeId.spec.ts
│ │ │ ├── ssrSuspense.spec.ts
│ │ │ ├── ssrTeleport.spec.ts
│ │ │ └── ssrVModelHelpers.spec.ts
│ │ ├── api-extractor.json
│ │ ├── index.js
│ │ ├── package.json
│ │ └── src
│ │ ├── helpers
│ │ │ ├── ssrCompile.ts
│ │ │ ├── ssrInterpolate.ts
│ │ │ ├── ssrRenderAttrs.ts
│ │ │ ├── ssrRenderComponent.ts
│ │ │ ├── ssrRenderList.ts
│ │ │ ├── ssrRenderSlot.ts
│ │ │ ├── ssrRenderSuspense.ts
│ │ │ ├── ssrRenderTeleport.ts
│ │ │ └── ssrVModelHelpers.ts
│ │ ├── index.ts
│ │ ├── render.ts
│ │ ├── renderToStream.ts
│ │ └── renderToString.ts
│ ├── shared
│ │ ├── LICENSE
│ │ ├── README.md
│ │ ├── __tests__
│ │ │ ├── __snapshots__
│ │ │ │ └── codeframe.spec.ts.snap
│ │ │ ├── codeframe.spec.ts
│ │ │ ├── escapeHtml.spec.ts
│ │ │ ├── looseEqual.spec.ts
│ │ │ ├── normalizeProp.spec.ts
│ │ │ └── toDisplayString.spec.ts
│ │ ├── api-extractor.json
│ │ ├── index.js
│ │ ├── package.json
│ │ └── src
│ │ ├── codeframe.ts
│ │ ├── domAttrConfig.ts
│ │ ├── domTagConfig.ts
│ │ ├── escapeHtml.ts
│ │ ├── globalsWhitelist.ts
│ │ ├── index.ts
│ │ ├── looseEqual.ts
│ │ ├── makeMap.ts
│ │ ├── normalizeProp.ts
│ │ ├── patchFlags.ts
│ │ ├── shapeFlags.ts
│ │ ├── slotFlags.ts
│ │ └── toDisplayString.ts
│ ├── size-check
│ │ ├── README.md
│ │ ├── package.json
│ │ └── src
│ │ └── index.ts
│ ├── template-explorer
│ │ ├── README.md
│ │ ├── index.html
│ │ ├── local.html
│ │ ├── package.json
│ │ ├── src
│ │ │ ├── index.ts
│ │ │ ├── options.ts
│ │ │ └── theme.ts
│ │ └── style.css
│ └── vue
│ ├── LICENSE
│ ├── README.md
│ ├── __tests__
│ │ ├── Transition.spec.ts
│ │ ├── TransitionGroup.spec.ts
│ │ ├── e2eUtils.ts
│ │ ├── index.spec.ts
│ │ ├── svgNamespace.spec.ts
│ │ └── transition.html
│ ├── api-extractor.json
│ ├── dist
│ │ └── vue.global.js
│ ├── examples
│ │ ├── __tests__
│ │ │ ├── commits.mock.ts
│ │ │ ├── commits.spec.ts
│ │ │ ├── grid.spec.ts
│ │ │ ├── markdown.spec.ts
│ │ │ ├── svg.spec.ts
│ │ │ ├── todomvc.spec.ts
│ │ │ └── tree.spec.ts
│ │ ├── classic
│ │ │ ├── commits.html
│ │ │ ├── grid.html
│ │ │ ├── markdown.html
│ │ │ ├── svg.html
│ │ │ ├── todomvc.html
│ │ │ └── tree.html
│ │ ├── composition
│ │ │ ├── commits.html
│ │ │ ├── grid.html
│ │ │ ├── markdown.html
│ │ │ ├── svg.html
│ │ │ ├── todomvc.html
│ │ │ └── tree.html
│ │ └── transition
│ │ ├── list.html
│ │ └── modal.html
│ ├── index.js
│ ├── package.json
│ └── src
│ ├── dev.ts
│ ├── index.ts
│ └── runtime.ts
├── rollup.config.js
├── scripts
│ ├── bootstrap.js
│ ├── build.js
│ ├── checkYarn.js
│ ├── dev.js
│ ├── release.js
│ ├── setupJestEnv.ts
│ ├── utils.js
│ └── verifyCommit.js
├── test-dts
│ ├── README.md
│ ├── component.test-d.ts
│ ├── componentTypeExtensions.test-d.tsx
│ ├── defineComponent.test-d.tsx
│ ├── functionalComponent.test-d.tsx
│ ├── h.test-d.ts
│ ├── index.d.ts
│ ├── inject.test-d.ts
│ ├── reactivity.test-d.ts
│ ├── ref.test-d.ts
│ ├── setupHelpers.test-d.ts
│ ├── tsconfig.build.json
│ ├── tsconfig.json
│ ├── tsx.test-d.tsx
│ └── watch.test-d.ts
├── tsconfig.json
└── yarn.lock
生成目录树
只要通过tree命令,就可以生成目录树,具体操作如下
sudo apt-get update && sudo apt-get install tree
// 生成目录树
tree
// 过滤掉node_modules
tree -I "node_modules"
// 生成指定层级的目录tree
tree -L 2
该命令需要在wsl下执行,如果在cmd下执行会报参数过长,其他命令自行执行tree --help