[发明专利]一种架构单页应用程序的方法

说明书

本发明公开了一种架构单页应用程序的方法，包括：创建mian.js，在mian.js引入store模块、views模块、router模块、axios模块、components模块和util模块。本发明基于Vue.js+Vuex+iView+Axios架构单页程序，结合了以数据驱动和组件化的思想、状态管理模式、开源UI组件库以及基于promise用于浏览器和node.js的http客户端，提供更简洁和易于理解的API，集中管理应用的所有组件的状态，可以通过编辑变量列表定制UI主题，实现了程序的快速开发、减少开发周期以及降低了时间成本。

技术领域

本发明涉及计算机技术与WEB应用开发技术领域，具体的说，是一种架构单页应用程序的方法。

背景技术

Vue.js自2016年大火，现在是前端开发主流的一个JavaScriptMVVM库，它是以数据驱动和组件化的思想构建的。相比于Angular.js，Vue.js提供了更加简洁、更易于理解的API，使得用户能快速上手并使用Vue.js。Vuex是一个专为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。为了快速运用新技术来开发或重构项目，本发明实例提供了一种以Vue.js+Vuex+iView+Axios架构单页应用程序的方法，用户可以迅速使用该方法投入开发，使其项目开发周期缩短，开发成本下降。

发明内容

本发明的目的在于提供一种架构单页应用程序的方法，用于解决现有技术中开发或重构项目不够快速，开发周期长，开发成本高的问题。

本发明通过下述技术方案解决上述问题：

一种架构单页应用程序的方法，包括：

创建入口文件mian.js，在入口文件mian.js引入store模块、views模块、router模块、axios模块、components模块和util模块，其中：

store模块：包括子文件xx.js、getter.js、index.js和generator.js，所述子文件xx.js根据业务需求创建，并定义了state、mutation和action；所述generator.js包含根据子文件xx.js的命名和收到的网络请求接口生成state、mutation和action的方法，所述生成state、mutation和action的方法被映射到子文件xx.js中；所述getter.js获取state数据，并返回至index.js，index.js用于组装子文件xx.js和getter.js，并导出至views模块；

views模块：包括app.vue、theme.less和module，所述app.vue为程序的主组件，所述theme.less用于提供UI主题，所述module为根据业务划分的子模块，所述子模块内包含功能页面；

router模块：包含router.js，用于创建新路由，并将组件映射到路由，接收theme.less的UI主题并向main.js提供渲染组件的位置；

axios模块：包括fetch.js，用于初始化axios模块并配置网络拦截器，并将网络请求接口传递给store模块的generator.js；

components模块：包含自定义控件；

util模块：用作工具箱，所述工具箱包含用于写入复用的数据的混入文件。

原理：

axios模块、store模块、components模块、util模块、views模块和router模块，六个模块功能划分清晰：

以axios模块作为http客户端发起网络请求获取数据，并将网络请求接口传递至store模块中的generator.js；