vue-overview-loader
v0.0.18
Published
webpack loader,能够处理 .vue|js|ts 文件,提取 vue 项目代码大纲,需要配合 vue-overview-loader-plugin 使用
Downloads
6
Readme
支持的语法
路由中
- 支持 import() 导入组件,在用于显示数据的模板中实现的
其他 ts|js 文件
- 参考 import、export 语法
vue中
- 支持 option 组件、class 组件、
<script setup>
组件- class
- 不支持@Watch
- 不支持@Ref
- class
- 不支持
- vue option 中不支持解构语法
- template
- 支持:
- 标签、{{}}、字符串注释
- 注释支持多行
- 支持解构
- 标签:
<div></div>
- attrs
- 不支持
- 运算符:
:style="a+b"
- 常量绑定:
:attr-a="'tw-m-2'"
- 模板语法
- 运算符:
- 支持
- 常量:
class="tw-p-2"
- 变量绑定:
:class="dataA"
- 函数调用绑定:
:attr-b="getAttrB1(getAttrB2(dataA, dataB))"
- 不支持
:attr-b="getAttrB1(getAttrB2(dataA),getAttrB3(dataB))"
- 临时:method\filter\extend\mixin\setup输出
- 不支持
- 属性表达式绑定:
:attr-c="dataB.a"
- filter绑定:
:attr-d="myClass | filterA | filterB"
- v-if,v-else-if,v-else
- v-for
- (item,index) in forName 其中 forName 只支持变量
- slot
- slot-scope
- v-slot
- 常量:
- 不支持
- attrs
- {{}}
- 不支持
- 运算符
- 常量
- 模板语法
- 括号内注释
- 支持
- 变量绑定
- 函数调用绑定
- 支持
{{ getAttrB1(getAttrB2(data, dataB)) }}
- 不支持
getAttrB1(getAttrB2(dataA),getAttrB3(dataB))
- 支持
- 属性表达式绑定
- filter绑定
- 不支持
- 字符串
- 支持:
- script
- class 组件
- 一个属性只允许使用一个装饰器
- props
- 配置对象,只支持字面量定义
- option 组件
- 对象
- default
- type
- PropType
- required
- 构造函数
- 数组
- 对象
- class 组件
- 装饰器实现
<script setup>
- defineProps
- 参数支持当前文档定义,不支持函数返回
- withDefaults 第二个参数只持支字面量定义
- defineProps
- name
- options 组件
- class 组件
- @Component 参数中
<script setup>
- 在另一个
<script>
的 options 中定义
- 在另一个
- extends
- 只支持文件外引入
- 优先级高于 mixins
- option 组件
- 配置对象
- 不支持:构造函数(vue2)
- class 组件
- 通过 ClassComponent extends OtherComponent 实现
<script setup>
- 在另一个
<script>
的 options 中定义
- 在另一个
- mixins
- 只支持文件外引入
- 优先级后面的覆盖前面的
- options 组件
- 配置数组
- class 组件
- 在 @Component 参数中传入
- class 组件提供 mixin 这个方法 extend 多个组件,本质上是 extends 但是放在 mixins 中
<script setup>
- 在另一个
<script>
的 options 中定义
- 在另一个
- components
- 不支持 components:{[component.name]:component}
- option 组件
- 配置
- class 组件
- 在 @Component 参数中传入
<script setup>
- 直接通过 import 获取
- filters
- 支持当前文件定义中的注释
- 支持其他文件引入得注释
- option 组件
- 配置
- class 组件
- 在 @Component 参数中传入
<script setup>
- 在另一个
<script>
的 options 中定义
- 在另一个
- 生命周期
- option 组件
- 不带 on
- class 组件
- 不带 on
<script setup>
- 带 on
- 能够整合当前文件多次调用中的注释
- 单独保存在元数据 lifecycleHookMap 中
- option 组件
- provide
- option 组件
- 对象
- 函数
- key为变量
- key为常量
- value 为 this 的属性引用
[s]: this.provideSymbolFrom.a
- value 为常量
provideB: "provideB"
- 函数只允许有一个 return
- class 组件
- @ProvideReactive、@Provide
- 为了保持和其他类型组件统一,只会提取装饰器的注释
<script setup>
provide("provideName", dataA)
- 参数1可以是字符串或变量名
- 参数2可以是字符串或变量名
- option 组件
- inject
- options 组件
- 数组
- 对象
- from 支持字符串和 Symbol
- default
- 直接获取代码片段,因为引用类型需要工厂函数
- 不允许使用变量名
- class 组件
- @Inject@injectReactive
- 装饰器参数同 options 对象配置的 value
- @Inject@injectReactive
<script setup>
- inject 没有存在 injectMap 中而是在 setupMap 中
- options 组件
- emits
- 会通过 emits 校验函数的参数获取 emit 抛出数据的类型
- 会通过 emit,$emit 调用的参数类型补充 emit 抛出数据的类型
- option 组件
- 数组
- 对象
- class 组件
- PropSync\ModelSync\VModel\Emit
- @Emit 只支持一个 return
<script setup>
- defineEmits
- 只支持 defineEmits 定义时的注释,不支持
emit('emitA',value)
的注释
- methods
- option 组件
- 对象
- class 组件
- 非生命周期的方法
<script setup>
- 没有存在 methodMap 中而是在 setupMap 中
- option 组件
- setup
- option 组件
- 只允许有一个return
- class 组件、
<script setup>
- 不支持
- option 组件
- computed
- 注释由3种组合、all:,get:,set:
- option 组件
- 对象 get,set
- 函数
- class 组件
- PropSync/ModelSync/get set 函数
<script setup>
- 没有存在 computedMap 中而是在 setupMap 中
- 没有all,get,set这些注释前缀
- data
- 支持当前文件的初始化方法
dataB: getDataB()
,getDataB 的定义需要在当前文件中 - 支持对象递归
dataA:{a:''}
=>能够获取data.a
的注释,初始化方法中也支持 - option 组件
- 对象
- 函数
- 函数只允许只有一个return
- class 组件
- 没有装饰器的属性
- Provide,ProvideReactive
<script setup>
- 没有存在 dataMap 中而是在 setupMap 中
- 支持当前文件的初始化方法
- import、export 语法
- import 导入路径为 @ 或 . 开头的才会被认为是内部代码才会进行处理
- node_module 和 routes.include 匹配的代码都不进行处理
- import a from ''
- import {default as b} from ''
- import {a} from '' 不能用于导入.vue组件
- import * as a from '' 不能用于导入.vue组件
- import {a as b} from '' 不能用于导入.vue组件
export const a={}
export default {}
ExportDefaultDeclarationexport {a}
export {a as b}
export {a} from ''
- import 导入路径为 @ 或 . 开头的才会被认为是内部代码才会进行处理
- class 组件
待办事项
- 根据 ts 获取具体类型
- class 多个装饰器
- require.context => import