# vueComponentUsage

**Repository Path**: zhao_juchang/vue-component-usage

## Basic Information

- **Project Name**: vueComponentUsage
- **Description**: 基于babel plugin的vue组件被使用情况收集整理为树形结构展示，解决了以下问题：
1.组件名在vscode全局关键字查找是和变量名同名，匹配出来太多而不明显
2.vscode在全局搜索关键字（组件名）时会有遗漏
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 3
- **Forks**: 0
- **Created**: 2022-06-12
- **Last Updated**: 2022-06-16

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vueComponentUsage

#### 介绍
基于babel plugin的vue组件被使用情况收集整理为树形结构展示，解决了以下问题：
1.组件名在vscode全局关键字查找是和变量名同名，匹配出来太多而不明显
2.vscode在全局搜索关键字（组件名）时会有遗漏

#### 安装教程
```
npm install -D vue-component-usage
```

#### 使用说明
1.  在babel.config.js中引入并使用vueComponentUsage plugins
```
const vueComponentUsage = require('vue-component-usage')

module.exports = {
  plugins: [vueComponentUsage({time: 20000})]
}
```
2.  运行项目`npm run serve`后并等待20s，可以在项目根目录下`tem.json`文件中查看组件被使用情况
```
{
    "/src/App.vue": [
        "/src/main.js"
    ],
    "/src/views/HomeView.vue": [
        "/src/router/index.js"
    ],
    "/src/views/AboutView.vue": [
        "/src/router/index.js"
    ],
    "/src/components/HelloWorld.vue": [
        "/src/views/AboutView.vue",
        "/src/views/HomeView.vue"
    ]
}
```

3.  初次使用请清除`node_modules`文件夹下的`.cache`文件夹


#### 参与贡献

1.  Fork 本仓库
2.  新建 Feat_xxx 分支
3.  提交代码
4.  新建 Pull Request