vue常用的ui组件库(vue3.0 ui组件库)

上一篇文章实现了封装单个组件库的功能。有了组件库，当然要有支持文档，这样信使使用起来更方便。最终完成的dist目录可以放入服务器并直接访问文档。
在项目中配置打包的示例
上一篇文章中，执行package命令会将项目打包成lib，打包的目录结构适合直接发布为npm包，使用import引入。里面没有html文件入口，需要有一个描述文档，可以直接在浏览器中访问，重新配置包装。
细心的童鞋会发现，我们的指令文档是vue文件，而ElementUI是markdown格式的文档，语法简洁，配置简单。那么他们是怎么做到的呢？本文将带你一步步分析和实现md文档。
与目录结构和webpack配置相关的包示例
I. package.json添加包命令\ ‘ build _ example \ ‘ : \ ‘ node build/build . js examples \ ‘
第二，在src的同级添加examples目录(删除前面的内容)来存储与文档相关的文档。
示例目录：
1.资产目录存储静态资源依赖关系。
2.组件存储vue组件，
3.文档目录存储。md文件、描述文档、
4.main.js将作为打包的入口，在这里项目的组件，第三方依赖：element-ui，路由配置等。将被介绍。
5.route.js路由配置，
6.index.html被用作打包的html模板，
7、App.vue
三。webpack的配置
在构建目录中添加webpack.prod.examples.conf.js文件，并配置打包的示例。这个文件是vue-cli生成项目中webpack.prod.conf.js的一个略微修改的版本。修改的部分：
1.添加输出出口配置。因为该值被设置为./lib，在这里它被设置为./dist，并将示例打包并输出到dist。
2.将examples下的打包条目设置为main.js。
3.将html模板设置为。/examples/index.html。
另外，在build/build.js中，需要判断示例参数，改变输出退出路径，如图：
从属安装
npm i高亮-D //安装语法高亮NPM I markdown-it markdown-it-anchor markdown-it-container-D//安全markdown依赖npm i vue-markdown-loader -D //安装vue-markdown-loader，并解析。md文件放入。vue文件webpack相关配置。
安装vue-markdown-loader是为了解析。md文件。在webpack.base.conf.js文件中，需要相关的加载程序配置。这里的配置是相关的，是copy的element-ui中的代码。这些变化如下：
首先，将stripe-tags文件添加到/build目录。条带标签的内容如下：
二、webpack.base.conf.js的变化
1.添加工具功能。
2.补充。md相关的加载器配置，并解析。md文件放入。vue文件。同时解析处理：33:3360代码块等。并将3360:代码块解析和处理为演示块vue组件，以及
文档编写部分
相关配置告一段落，接下来进入示例文档部分。
一、main.js入口文件的编写
在门户文件中，引入了相关的依赖项、项目风格门户、路由、组件和元素ui。
其次，设置路由配置route.js
配置路由时，将路由路径对应的组件设置为导入的。md文件。
第三，App.vue，以及相关的布局组件
1、App.vue
2、header.vue
3.menu.vue(这里我们借用了element-ui的菜单组件)
四。重要组件demoBlock.vue
DemoBlock组件是解析中：33603: demo 336033603:的代码块所需的组件。MD .这里的demoBlock.vue文件是copy的element-ui的代码，稍微修改了一下(这部分对应的是loader里配置的)。
主要代码在这里，可以在element-ui中查看样式文件。
V.文档中的md文档文件
写作时有几点需要注意。md文件：
一个具有交互功能的描述文档需要一个标签，要导出的vue实例在标签元素中定义(这部分将是下一个版本的重点)。
3360: DEMO 3360:代码块中定义的模板将作为导出的vue实例的模板，但代码块中的内容仅用于显示。
的。粘贴时，md文件将无法正确显示。这里只截图，有需要的伙伴可以访问github查看。
不及物动词风格调整
这里不单独列出相关的风格调整代码，有需要的小伙伴可以去github查看。
发展
开发中的调试
将webpack.dev.conf.js文件的条目设置为。/examples/main.js，这样就可以在开发组件的同时调试组件，还可以调试到文档。
条目： {app3360 ‘。/examples/main.js’}，结论
本文带您了解编译element-ui组件库文档的过程，您可以参考示例将其集成到自己的组件库中。同时，本文介绍了这种方法的“不足”和下一版本的改进方向，我们将继续沿着这个方向构建我们的构件库文档。