一种基于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组件，去除