vue-component-view

介绍

基于vue2.x的插件，可以把项目中的组件注册进来统一展示，方便多人开发时了解已有组件以及对应的api

软件结构

这个插件分为两个部分，一个是检查组件部分，一个是添加预览页面的部分。

• 检查组件的部分会根据配置检查项目内的vue文件，然后生成配置文件。
• 预览页面部分会生成一个vcv的文件夹在main.js的同级目录中。

安装教程

1. npm install vue-component-view --save-dev -g
2. 配置package.json

//在package.json中
{
    ...,
    "vcvConfig": {
        /* "routerPath": "" */
        "routerPath": ["./src/router/index.js"], //这个是必须配置的，用于查找路由的文件。目前只能识别直接引入组件的(component: About)和懒加载路由配置(componet:()=>import('../../about.vue'))，其它写法不能准确识别路由，但也没有关系，这个的作用直接用于排除哪些vue文件是页面，用户可以自己手动去掉配置文件中的vue配置。
        "include": ["./src/components/**/**/*.vue"], //只查找这里面的vue文件作为组件。这个配置可以让查找更准确。如果没有配置默认查找：src/**/**/*.vue。
    },
}

注意：如果配置了include可以在routerPath设置为"routerPath": ""

3. 在项目的根目录下（package.json的同级）执行命令vcv create,执行命令后会在项目的src下创建一个名为vcv.config.js的文件，并生成一个vcv文件夹在同级
4. 在main.js中引入插件：

// 在main.js中
import VueComponentView from 'vue-component-view'
import ComponentConfig from './vcv.config'

Vue.use(VueComponentView, { ...ComponentConfig})

5. 此时如果有报错，不要慌张，因为会检查出很多vue组件，可能项目中并没有用到，一些组件可能本身就有问题，根据需要可以去掉vcv.config.js中对该组件的引用。

使用说明

1. vcv create 扫描vue文件，生成vcv.config.js和vcv文件夹，注意：vcv create之前务必要先定义好package.json中的vcvConfig，具体参考安装教程的第二步。
2. vcv init 创建模板页面, 只生成vcv文件夹。
3. vcv.config.js支持的配置如下：

//在vcv.config.js中
const componentsList = [{
    component: ()=> import('./components/Header.vue'),
    desc: 'Header组件的说明在这里',
    name: 'Header',
    path: './components/Header.vue',
    props: { //可以给传入组件的props赋值
        hasBack: true,
    },
    emits: {
        back: function (...argv) { //监听子组件的事件，比如子组件会this.$emit('back', 123),会触发这个方法,打印123
            console.log('back', argv)
        }
    }
}]

4. 如果开发者需要自定义的话可以修改config中的配置对象，和vcv文件夹下面的页面实现自定义
5. vcvConfig配置中的routerPath和include都是可以之传入字符串的，也就是但路径。传入的盘符支持glob语法。路径是以当前package为基准的相对路径。例如./src/router/index.js

下一步计划

• 想办法将vcv文件夹放入插件包中
• 增强页面的组件，或者给此插件增加增强插件功能
• 优化对vue文件的扫描识别
• 优化预览页面对属性的识别结果

问题反馈

可以在issue中反馈问题，如果响应不及时可以加我qq：1052445790