1.0.2 • Published 3 years ago
vue-component-view v1.0.2
vue-component-view
介绍
基于vue2.x的插件,可以把项目中的组件注册进来统一展示,方便多人开发时了解已有组件以及对应的api
软件结构
这个插件分为两个部分,一个是检查组件部分,一个是添加预览页面的部分。
- 检查组件的部分会根据配置检查项目内的vue文件,然后生成配置文件。
- 预览页面部分会生成一个vcv的文件夹在main.js的同级目录中。
安装教程
- npm install vue-component-view --save-dev -g
- 配置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": ""
- 在项目的根目录下(package.json的同级)执行命令
vcv create
,执行命令后会在项目的src下创建一个名为vcv.config.js
的文件,并生成一个vcv文件夹在同级
- 在main.js中引入插件:
// 在main.js中
import VueComponentView from 'vue-component-view'
import ComponentConfig from './vcv.config'
Vue.use(VueComponentView, { ...ComponentConfig})
- 此时如果有报错,不要慌张,因为会检查出很多vue组件,可能项目中并没有用到,一些组件可能本身就有问题,根据需要可以去掉
vcv.config.js
中对该组件的引用。
使用说明
vcv create
扫描vue文件,生成vcv.config.js
和vcv文件夹
,注意:vcv create
之前务必要先定义好package.json中的vcvConfig,具体参考安装教程的第二步。vcv init
创建模板页面, 只生成vcv
文件夹。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)
}
}
}]
- 如果开发者需要自定义的话可以修改config中的配置对象,和vcv文件夹下面的页面实现自定义
- vcvConfig配置中的routerPath和include都是可以之传入字符串的,也就是但路径。传入的盘符支持glob语法。路径是以当前package为基准的相对路径。例如
./src/router/index.js
下一步计划
- 想办法将vcv文件夹放入插件包中
- 增强页面的组件,或者给此插件增加增强插件功能
- 优化对vue文件的扫描识别
- 优化预览页面对属性的识别结果
问题反馈
可以在issue中反馈问题,如果响应不及时可以加我qq:1052445790