创建UI组件库并生成组件文档

本人技术不精，随便玩玩，仅供参考，文末提供完整源码。个人认为市面上的组件库太多了。事实上，我们不需要自己构建它们。只需取出一个即可满足基本的开发需求。如果你想玩，你可以尝试自己建造一个。首先我们简单的说，使用Vue-cli搭建一个项目结构。为了随时看到效果，我们默认使用src作为引用组件的入口来调试组件效果；我们还需要创建一个组件（任意名称）文件夹来存储组件。目录结构如下├─node_modules├─public├─components//存储组件├─src//引用组件├─components├─assets├─App.vue├─router.js├─index.js//Self-构建文件，引入组件库└─main.js├─babel.config├─package.json└─README.md接下来正式进入构建组件的环节。1、创建组件目录我们以按钮组件为例，根据需要引入样式即可，用户可以方便的修改样式。我们把css拿出来单独写。当然，如果只是写一个组件供几个人使用，也可以直接写在.vue中。一个组件包含以下文件：├─components├─style//样式文件├─index.scss//全局样式├─base.scss//通用样式└─button.scss//独立组件样式└─button//组件文件├─index.js//单独打包文件└─src├─main.vue//编写组件└─myBtn.md//展示示例2.编写组件在main.vue中编写一个组件，代码如下通过:class="['btn',btn-${type}]"改变不同类型按钮的样式在style文件夹对应的scss中写一些样式，代码如下：.btn{width:150px;高度：40px；边框：无；字体大小：16px；color:#fff;}.btn-primary{background:blue;}.btn-success{background:green;}在index.js中注册组件，代码如下：importMybtnfrom"./src/main.vue"Mybtn.install=function(Vue){Vue.component(Mybtn.name,Mybtn);};exportdefaultMybtn;3.使用组件现在一个组件已经完成了，我们来使用它看看效果。在main.js中引入组件和样式（我这里是全局导入或者按需导入）importVuefrom'vue'importAppfrom'./App.vue'import{Mybtn}from"./index.js"import"../components/style/index.scss";Vue.use(Mybtn)Vue.config.productionTip=falsenewVue({render:h=>h(App),}).$mount('#app')可以用在App.vue一个按钮组件就出来了4.生成组件库文档组件完成后，为了让用户更直观的使用，需要创建一个组件文档。我用的是@Vuese/cli，很简单好用，具体安装教程参考文档@vuese/cli安装完成后，此时执行vuesegen，根目录下会出现【网站】目录，你的组件文件会生成，目录如下website├──index.html├──components├──├──myBtn.md├──├──HelloWorld.md这里标出重点！！其实我只建了一个myBtn组件，结果出来了两个目录。这是因为vuese会自动识别.vue后缀的文件。我们可以指定它的生成路径官网：vuese会在命令的运行目录下搜索vuese。config.js或者.vueserc或者package.json文件的vuese属性所以我们在根目录下新建一个.vueserc并配置{"include":["./components/**/*.vue"//指定生成的.vue文件],"title":"ComponentDocumentation",//组件标题"genType":"docute"//组件类型}删除网站（目录下已有文件删除时不会自动重新打包，所以建议删掉重新生成一份），执行vuesegen，此时只有一个myBtn，重启后组件文件就出来了，很方便，页面如下：还有一个问题需要注意的是：生成的文档没有主页。如果点击标题，可以看到路由变成了'/'，页面显示404，这时候我们需要手动添加一个首页。这很简单。我们在网站目录下手动写了一个README.md文件，（文件名必须是README！），打包文件时会自动识别为路由'/'，目录如下：website├──index.html├──README.md├──components├──├──myBtn.mdREADME.md随便写吧#文档说明就是首页，这个时候再看一下5.实现组件文档可以预览，整个组件打包。vuese只能生成纯文档，只有一大段文字，没有Component预览效果，并且启用举个例子，我们只能手动添加。记得我们一开始就留了一个组件预览的地方！预览实现过程：因为每次打包文档时，都会重新生成内容，即使手动添加预览代码以及事件动作，重新打包后也会恢复到原来的内容。这种方式显然不可取×所以我们预留一个md文件单独写预览功能。在执行vuesegen文件打包时，使用gulp将两个md文件合并。这时候既有预览又有组件。因为一开始没有找到很全的参考资料，不是预览没了，就是打包的太乱了，所以在打包预览的时候把参考资料都整合了。这两篇文章的内容，组件预览功能，打包功能（可以点进去看看，作者的打包过程很详细）构成了比较全面的组件全流程，因为文章写的很详细，这里我就不多介绍实现过程了。至于如何集成，可以查看文末我的github。事件和样式一起添加到文档中。我们可以在网站目录外新建一个index.html，导入styles和js，然后用新建的index.html替换website文件夹下的index.html（同gulp）。这个时候文档功能已经很完善了。此时目录结构的根目录├──website├──gulpfile.js//添加├──document//添加目录├──├──index.html//新建文件并启动文档现在页面，一个完整的组件功能流程将被打包发布。我会重写一篇文章。完整示例戳githubgithub地址