CN109271149A - 一种架构单页应用程序的方法 - Google Patents

Abstract

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

Description

一种架构单页应用程序的方法

技术领域

本发明涉及计算机技术与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；

store模块中可以根据业务需求创建子文件xx.js，xx.js中定义的state用于记录状态，通过mutation改变state状态，action用以异步分发mutation中的具体内容；store模块以Vuex集中存储和管理应用的所有组件的状态，并按照定义的规则保证组件的变化可预测；

views模块以iView作为网页UI组件框架，包含app.vue、theme.less和module，app.vue即程序的主组件，确定了网站布局，其他所有页面都是在app.vue下切换的，theme.less是iView默认提供的一套UI主题，定义了一套样式变量，编辑这个变量列表就可以轻松定制新主题，以满足业务和品牌上的多样化视觉需求；module内是根据业务需求划分的子模块，子模块内有对应功能的页面。

router模块将组件映射到路由，以Vue-router渲染组件；store模块和views模块根据业务需求划分出对应的子模块，六个模块功能划分清晰。

Components模块：包含各种根据业务需求编写的自定义控件，在页面可引入使用。也可用npm安装github上的第三方控件并在页面中直接使用。

用户更改axios模块的fetch.js文件内的网络请求接口地址和对应命名，根据业务需求创建store模块内的子模块xx.js，在其中声明与fetch.js相同的接口命名，再根据业务需求编写自定义getter.js，在index.js中将子模块xx.js和getter组合起来并导出store模块，由此，便结合Axios和Vuex完成了整个项目的网络接口请求数据并全局管理数据的功能。之后，用户再根据业务需求编写views模块的app.vue确定整个系统的布局，编写views模块的子模块页面，修改theme.less定制新主题，根据需要编写components模块中的自定义控件和工具类，最后编写router模块的router.js，创建新Router将组件映射到路由，由此便完成整个程序。用户根据业务需求可自行修改本架构中的模块，比如若利用iView的theme.less来创建新主题无法满足视觉需求，可以另新建CSS文件来编写样式。

本发明与现有技术相比，具有以下优点及有益效果：

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

附图说明

图1为本发明的架构图。

具体实施方式

下面结合实施例对本发明作进一步地详细说明，但本发明的实施方式不限于此。

实施例1：

结合附图1所示，一种架构单页应用程序的方法，包括：

创建入口文件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；

store模块中可以根据业务需求创建子文件xx.js，xx.js中定义的state用于记录状态，通过mutation改变state状态，action用以异步分发mutation中的具体内容；store模块以Vuex集中存储和管理应用的所有组件的状态，并按照定义的规则保证组件的变化可预测；

views模块以iView作为网页UI组件框架，包含app.vue、theme.less和module，app.vue即程序的主组件，确定了网站布局，其他所有页面都是在app.vue下切换的，theme.less是iView默认提供的一套UI主题，定义了一套样式变量，编辑这个变量列表就可以轻松定制新主题，以满足业务和品牌上的多样化视觉需求；module内是根据业务需求划分的子模块，子模块内有对应功能的页面。

router模块将组件映射到路由，以Vue-router渲染组件；store模块和views模块根据业务需求划分出对应的子模块，六个模块功能划分清晰。

Components模块：包含各种根据业务需求编写的自定义控件，在页面可引入使用。也可用npm安装github上的第三方控件并在页面中直接使用。

用户更改axios模块的fetch.js文件内的网络请求接口地址和对应命名，根据业务需求创建store模块内的子模块xx.js，在其中声明与fetch.js相同的接口命名，再根据业务需求编写自定义getter.js，在index.js中将子模块xx.js和getter组合起来并导出store模块，由此，便结合Axios和Vuex完成了整个项目的网络接口请求数据并全局管理数据的功能。之后，用户再根据业务需求编写views模块的app.vue确定整个系统的布局，编写views模块的子模块页面，修改theme.less定制新主题，根据需要编写components模块中的自定义控件和工具类，最后编写router模块的router.js，创建新Router将组件映射到路由，由此便完成整个程序。用户根据业务需求可自行修改本架构中的模块，比如若利用iView的theme.less来创建新主题无法满足视觉需求，可以另新建CSS文件来编写样式。

尽管这里参照本发明的解释性实施例对本发明进行了描述，上述实施例仅为本发明较佳的实施方式，本发明的实施方式并不受上述实施例的限制，应该理解，本领域技术人员可以设计出很多其他的修改和实施方式，这些修改和实施方式将落在本申请公开的原则范围和精神之内。

Claims (1)

1.一种架构单页应用程序的方法，其特征在于，包括：

创建入口文件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模块：用作工具箱，所述工具箱包含用于写入复用的数据的混入文件。