[发明专利]基于Vue生成动态页面的方法、系统、存储介质及设备

说明书

本发明提供了一种基于Vue生成动态页面的方法、系统、存储介质及设备，方法包括：基于Vue脚手架工具创建Vue项目，并设置Vue项目的目录结构；基于目录结构配置多个动态页面的路由地址、应用程序接口以及父组件模块，并使父组件模块利用路由地址分别定位至每个动态页面所在的位置，并通过应用程序接口分别获取每个动态页面的数据，以分别显示每个动态页面。本发明为前端提供了一种分治策略，具有独立性，组件之间可以自由组合，可以实现独立维护，可维护性强；通过使用Vue生态中官方脚手架，以写文档的方式编写功能示例，在不增加额外学习成本的情况下即可实现组件库的开发。

技术领域

本发明涉及WEB前端技术领域，尤其涉及一种基于Vue生成动态页面的方法、系统、存储介质及设备。

背景技术

Vue可以说是MVVM(Model-View-ViewModel，本质上是MVC的改进版，具体是将其中的View的状态和行为抽象化，将视图UI和业务逻辑分开)架构的最佳实践，是一个JavaScript MVVM库，是一套构建用户界面的渐进式框架。MVVM中的ViewModel不仅做到了数据双向绑定，而且也是一款相对轻量级的JS库，API(Application ProgrammingInterface，应用程序接口)简洁。

Vue其中一个优势在于它的组件化，组件化就是把图形、非图形的各种逻辑均抽象为一个统一的概念(组件)来实现开发的模式。不仅可以化繁为简，且复用性强。

目前根据Vue生成显示页面的方式虽然利用了组件化，但在多页面需求下开发效率较低，且可维护性较差。

发明内容

有鉴于此，本发明的目的在于提出一种基于Vue生成动态页面的方法、系统、存储介质及设备，用以解决现有技术中根据Vue生成显示页面的方式在多页面需求下开发效率较低，且可维护性较差的问题。

基于上述目的，本发明提供了一种基于Vue生成动态页面的方法，包括以下步骤：

基于Vue脚手架工具创建Vue项目，并设置Vue项目的目录结构；

基于目录结构配置多个动态页面的路由地址、应用程序接口以及父组件模块，并使父组件模块利用路由地址分别定位至每个动态页面所在的位置，并通过应用程序接口分别获取每个动态页面的数据，以分别显示每个动态页面。

在一些实施例中，基于Vue脚手架工具创建Vue项目，并设置Vue项目的目录结构包括：

基于Vue脚手架工具输入Vue项目名称，以创建Vue项目；

在Vue项目的根目录中安装必要组件模块，并在项目入口文件中引入必要组件模块；

在根目录下新建组件文件夹和源文件夹，并在源文件夹中新建路由文件夹和全局文件夹。

在一些实施例中，基于目录结构配置多个动态页面的路由地址包括：

在路由文件夹中新建第一索引文件，并在第一索引文件中配置多个动态页面的路由地址；

在项目入口文件中引入路由地址，并将路由地址的实例注入至Vue根组件中。

在一些实施例中，基于目录结构配置多个动态页面的应用程序接口包括：

在全局文件夹下新建http.js文件，并在http.js文件中存放封装的axios服务；

在全局文件夹下新建api.js文件，并在api.js文件中引入axios服务中的操作请求，并编写对应的应用程序接口。

在一些实施例中，基于目录结构配置多个动态页面的父组件模块包括：

在组件文件夹下创建第二索引文件；