CN112162729A - 一种基于vue的组件开发及展示方法 - Google Patents

Abstract

本发明公开了一种基于VUE的组件开发及展示方法，包括创建组件工程配置环境,实现自定义组件库,展示组件功能、代码块及配置说明,打包发布至npm。本发明解决了软件开发过程中现有开源UI组件库无法满足越来越复杂的需求，开发团队内部组件库的技术问题，增强可控性，通过对各类组件展示方式的研究，以示例、源码方式展示组件配置及功能，使开发人员快速掌握并使用组件，提高网站开发人员的工作效率。

Description

一种基于VUE的组件开发及展示方法

技术领域

本发明涉及WEB软件开发技术领域，特别涉及一种基于VUE的组件开发及展示方法。

背景技术

传统开发方式效率低以及维护成本高的主要原因在于很多时候是将一个系统做成了整块应用，而且往往随着业务的增长或者变更，系统的复杂度会呈现指数级的增长，经常出现的情况就是一个小小的改动或者一个小功能的增加可能会引起整体逻辑的修改，造成牵一发而动全身。

针对此弊端，其实业界早就有了一些探索，我们希望一个大且复杂的场景能够被分解成几个小的部分，这些小的部分彼此之间互不干扰，可以单独开发，单独维护，而且他们之间可以随意的进行组合。就拿电脑主机来说，一台整机包括CPU，主板，内存，硬盘等等，而这些部件其实都是由不同的公司进行生产的，他们彼此之间根据一套标准分别生产，最后组装在一起。当某个部件出现问题时，不需要将整台主机都进行维修，只需要将坏的部件拿下来，维修之后再将其组合上就可以了。这种化繁为简的思想在后端开发中的体现是微服务，而在前端开发中的体现就是组件化。

Vue等浏览器端渲染模板近年来收到广泛关注，然而现有的Vue等浏览器端渲染模板虽然实现了数据的双向绑定，但是开发过程比较繁琐，复用性较低，而且在后期运维中修改操作比较繁琐。

市面上目前已有各种各样的UI组件库，比如Element和iView，他们的强大毋庸置疑。但是我们面临的情况是需求越来越复杂，当它们不能再满足我们需求的时候，这个时候就有必要开发一套属于自己团队的组件库了。

如果团队想要一个更加快速的开发方式，希望有一套一类应用的标准，并且对组件的样式有较高的要求，那么也需要开发一套组件库。

发明内容

本发明的目的在于提供一种基于VUE的组件开发及展示方法，以解决上述背景技术中提出的问题。

为实现上述目的，本发明提供如下技术方案：一种基于VUE的组件开发及展示方法，包括如下步骤：

S1：创建组件项目和规划目录结构，其中创建基础环境需借助Vue-cli脚手架；

S2：实现软件开发过程中所需的自定义功能组件；

S3：组件功能实现后，编写功能示例、使用说明并进行功能代码块展示；

S4：根据需求可发布至npm，进行版本管理，供多个项目引用，实现自主研发Vue的UI组件库。

优选的，具体实施步骤如下：

a1：在根目录新增vue.config.js，调整项目配置以支持目录结构；

b1：配置多页面入口文件，调整为上述规划的目录；

c1：根据开发需求信息，拆分为多个功能组件；

d1：按照拆分的组件功能，进行各组件源码的开发，在组件目录下创建index.js文件以对外提供引用；

e1：创建样例块组件，用于组件功能示例的统一展示。

优选的，扩展webpack配置，增加在Vue中加载markdown文件的加载器；

拦截.md文件过滤解析代码片段，用于直接展示组件功能效果和实现此功能的代码块；

为文档标题增加描点，实现快速跳转；

调整根目录的package.json文件配置，打包发布至npm。

本发明的技术效果和优点：

(1)解决了现有开发过程中小团队无法开发及维护私有组件库的技术问题。为组件库的开发、维护、培训使用提供了一种实现方式，从而提高可控性、易维护性、减少团队成员的学习成本；

(2)本申请实例实施方案为前端提供了一种分治策略，组件具有独立性，组件之间可以自由组合，可以实现独立维护，可维护性强；

(3)应用此方式小能做一个简单的插件供他人使用，大能架构和维护一个组件库，使个人或小团队能独立自主研发私有组件库，提高代码的可控性，进而可以实现更多复杂、疑难需求；

(4)降低组件库开发技术难度，使用Vue生态中官方脚手架，以写文档的方式编写功能示例，在不增加额外学习成本的情况下即可实现组件库的开发；

(5)本申请实例实施方法提供的示例代码展示功能可使团队成员快速掌握各组件使用方法，可再此基础上扩展代码复制、在线编辑功能，提高开发效率。

附图说明

图1为本发明流程示意图。

具体实施方式

下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

本发明提供了如图1所示的一种基于VUE的组件开发及展示方法；

实施例一：

通过Vue-cli脚手架创建基础项目开发环境，规划修改目录适于组件库文件的划分，调整配置文件以支持目录的修改；

逐一编写功能组件，其中功能组件可包括常用表单、列表、菜单、弹出框、分页等任何组件；

创建样例块组件，使示例demo有统一的输出,样例块是指一个声明了描述、代码块插槽和控制栏的Vue组件，接收一个包括html/script/style内容的对象属性；

修改webpack配置，增加markdown文档.md文件的加载器，对文档进行过滤解析；

编写组件示例和组件描述、属性、事件回调说明；

配置编译库模式，打包并发布至npm后在其他项目中引用并使用组件。

实施例二：

步骤S1：创建组件项目和规划目录结构，调整项目配置以支持目录结构；

通过Vue-cli创建项目工程，在指定目录中使用create命令创建一个默认的工程，将工程默认生成目录中的src文件夹修改为examples用作示例展示，新增packages文件夹用于编写存放组件，在所述工程根目录新增vue.config.js，按照如下方式修改入口pages项设置，以构建一个多页面应用；

首先修改src目录为上述中examples目录；

然后修改配置中的chainWebpack选项以支持对packages目录的处理；

扩展webpack配置，使packages文件夹加入编译；

其中Vue.config.js是Vue-cli提供的可选配置文件，当此文件存在则被自动加载，对项目、webpack的配置均在此进行，chainWebpack是一个函数，会接收一个基于webpack-chain的ChainableConfig实例，允许对内部webpack配置进行更细粒度的修改；

步骤S2：为实现所述按需求信息创建功能组件，首先明确需开发包含的目标功能；

例如开发管理系统应用需表单各项组件、弹出框、列表和菜单功能，组件库内容可包括但不限于所列组件，在上述新增的packages目录下创建各功能组件，以弹出框vdialog为示例；

首先创建目录dialog/；

然后在dialog/目录下创建src/目录存储组件源码；

在src中创建dialog.vue组件，组件必须声明name，在组件中编写具体功能逻辑代码；

在dialog/目录下创建index.js文件对外提供对组件的引用；

按照如下方式修改/packages/dialog/index.js文件；

导入组件import dialog from'./src/dialog.vue'；

为组件提供install安装方法，以实现按需引入；

dialog.install＝function(Vue){Vue.component(dialog.name,dialog)}默认导出组件export default dialog；

按照示例vdialog的方法分别构建其他功能组件，整合所有组件并按照如下方法对外导出，形成一个完整的组件库；

在上述packages目录下增加index.js文件；

导入弹出框组件import dialog from'./dialog'；

存储组件列表const components＝[dialog]；

定义install方法，接收Vue作为参数，先判断安装状况，若安装则返回，否则遍历components通过Vue.component注册为全局组件；

再判断直接引入文件的状况，若是则执行install(window.Vue)；

最后导出包含install和各组件的对象，使组件库可以被Vue.use()方法安装；

在使用Vue.use()全局注册后，即可在任意页面直接使用，也可以按需引入，便于开发及后期维护；

步骤S3：为实现所述组件功能展示及配置说明功能，需编写功能示例及配置文档；

首先安装依赖：vue-markdown-loader、markdown-it、markdown-it-anchor、markdown-it-container、cheerio和highlight.js，其中：

vue-markdown-loader是核心，用于将markdown文档转为Vue页面；

markdown-it用于渲染markdown基本语法；

markdown-it-anchor用于为各级标题添加锚点，可以使阅读者快速跳转到相应功能部分；

markdown-it-container用于创建自定义的块级容器；

cheerio用于服务器端对DOM进行操作；

highlight.js代码块高亮实现；

为实现示例功能及代码块展示，需在加载markdown文档.md文件时进行拦截，对内容进行解析和转换以达到直接展示组件效果的同时展示实现此功能的代码块，此功能还包括如下操作步骤：

在根目录创建strip-tags.js工具类，引入cheerio，借助cheerio实现去除标签、获取符合规则的标签的内容，本方案用于在生成组件效果展示时，解析出Vue组件，去除<script>和<style>标签将转换后的代码放入<header>中，定义fetch方法接受一个代码字符串和标签名称为参数，按标签名称获取标签中的内容；

编写完工具类后，继续修改webpack配置，在Vue.config.js中引入markdown-it、strip-tags.js，为防止cheerio转换汉字时出现转为Unicode的情况，定义convert方法使用encodeURIComponent保证最终转码正确；

定义wrap方法，接受render为参数，通过正则替换掉render中<code>标签的v-pre，以实现直接展示组件效果，同时增加hljs样式类名，运用highlight.js实现示例代码语法标签高亮，使代码更醒目易读；

在chainWebpack中新增加载器loader配置，以实现对.md文件的支持，包括以下逻辑：

(1)引入markdown-it-anchor开启标题锚点功能，设置添加超链接锚点的最小标题级别，为各级标题添加锚点实现快速跳转；

(2)引入markdown-it-container，声明自定义代码块的标记为“demo”，使文档中应用:::demo:::的语法部分进入自定义渲染方法；

(3)自定义render:function(tokens,idx){}方法，用正则捕获文档中的文字描述内容，tokens[idx+1].content获得代码内容，使用上述定义的convert方法过滤解码生成html字符串；

(4)使用上述strip-tags.js中定义的fetch方法分别传入'script'/'style'获取script、style中的内容，判断描述内容的有无性，如果有则调用markdown-it的render方法渲染文本描述内容；

(5)声明jsfiddle＝{html:html,script:script,style:style}，调用markdown-it的utils.escapeHtml将jsfiddle对象转换为字符串,并将特殊字符转为转义序列；

(6)最后返回创建的demoBlock组件，传入jsfiddle及以插槽名称命名的相应内容；

其中demoBlock为自定义的Vue组件，用于同一展示功能及示例代码块、说明描述，组件中须声明props jsfiddle，为传入的解析后的组件示例文档内容，分别定义插槽source、description、highlight显示示例组件功能、描述内容、实现示例功能的代码块，也可以在此基础上扩展定义control部分，用以折叠/收起代码块、复制代码功能或借助jsFiddle/CodePen实现代码在线编辑功能；

上述实现了功能示例的展示及文档内容解析功能，下面进行组件示例和配置文档的编写；

首先入口文件需引入Vue，导入组件库import Dialog from'./../packages/index'，使用Vue.use(Dialog)注册组件，使用Vue.use()全局注册后，即可在任意页面直接使用，不需另外引入，也可以按需引入；

以上述dialog组件为示例，在examples目录下创建dialog.md，参考以下内容进行示例编写：

按照markdown语法编写描述内容，在:::demo:::块中编写组件的应用，针对不同效果可编写多个demo块；

###Attributes属性

|参数|说明|类型|可选值|默认值|

|----------|--------------|----------|--------------------------------|--------|

|visible|是否显示Dialog，支持.sync修饰符|boolean|—|false|

|title|Dialog的标题，也可通过具名slot(见下表)传入|string|—|—|

###Events事件

|事件名称|说明|回调参数|

|----------|--------|----------|

|open|Dialog打开的回调|—|

|close|Dialog关闭的回调|—|

按照markdown table的语法编写组件属性配置、事件回调的说明内容，最终会渲染为table表格，在项目中定义路由，component路径为dialog.md所在目录，运行项目，浏览器访问dialog页面，即包含dialog的示例及实现此功能的代码块，属性和事件说明以table表格形式展示，依照dialog示例方法可以实现组件库所有组件的功能展示及使用说明展示；

步骤S4：为实现打包发布功能，需修改根目录的package.json文件，在scripts对象中新增一条编译为库的命令npm run lib；

构建目标--target设置为lib，启用库模式；

名称--name为vdialog，输出目录--dest设置为lib；

入口文件[entry]设置为packages/index.js；

执行编译库命令$npm run lib配置package.json文件中发布到npm的其他字段包名、版本号、描述、入口文件、关键字、作者、私有状况及开源协议，以下为参考设置：

添加.npmignore文件，设置忽略发布文件examples/、packages/、public/，忽略指定文件vue.config.js、babel.config.js、*.map；

注册npm账号，然后在终端执行登录命令$npm login，输入用户名、密码、邮箱；

执行发布命令$npm publish，发布成功后，即可在npm官网搜索到刚提交的vdialog；

至此组件库构建完成，可在其他项目中使用新发布的组件库开发功能，在所要运用组建的项目目录下运行$npm install vdialog-S命令安装组件，在main.js引入并注册import vdialog from vdialog；Vue.use(vdialog)，在组件中使用，参考步骤S3中示例文档中:::demo:::内示例代码。

最后应说明的是：以上所述仅为本发明的优选实施例而已，并不用于限制本发明，尽管参照前述实施例对本发明进行了详细的说明，对于本领域的技术人员来说，其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换,凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。

Claims (3)

1.一种基于VUE的组件开发方法，包括如下步骤：

S1：创建组件项目和规划目录结构，其中创建基础环境需借助Vue-cli脚手架；

S2：实现软件开发过程中所需的自定义功能组件；

S3：组件功能实现后，编写功能示例、使用说明并进行功能代码块展示；

S4：根据需求可发布至npm，进行版本管理，供多个项目引用，实现自主研发Vue的UI组件库。

2.根据权利要求1所述的一种基于VUE的组件开发方法，其特征在于，具体实施步骤如下：

a1：在根目录新增vue.config.js，调整项目配置以支持目录结构；

b1：配置多页面入口文件，调整为上述规划的目录；

c1：根据开发需求信息，拆分为多个功能组件；

d1：按照拆分的组件功能，进行各组件源码的开发，在组件目录下创建index.js文件以对外提供引用；

e1：创建样例块组件，用于组件功能示例的统一展示。

3.根据权利要求1-2任意一项所述的一种基于VUE的组件展示方法，其特征在于，扩展webpack配置，增加在Vue中加载markdown文件的加载器；

拦截.md文件过滤解析代码片段，用于直接展示组件功能效果和实现此功能的代码块；

为文档标题增加描点，实现快速跳转；

调整根目录的package.json文件配置，打包发布至npm。

Images