vue+vue-router+requirejs+xe-ajax+mock RequireJS项目简单实例

vue+vue-router+requirejs+xe-ajax+mock


使用requirejs模块化开发,前端独立+Mock虚拟服务,简单项目搭建例子:


项目结构

assets: 用于存放资源文件,比如样式文件等

mock:用于存放mock数据,比如后端接口未完成情况下使用Mock前端虚拟服务能提高开发效率

router:用于放vue前端路由配置文件

static:静态文件,用于放相关插件

views:存放vue视图文件

vue+vue-router+requirejs+xe-ajax+mock RequireJS项目简单实例


首先对于要支持低版本浏览器(比如IE11以下)的情况下,使用babel-polyfill转码用于支持低版本浏览器。

index.html

引入polyfill.js 和 require.js

vue+vue-router+requirejs+xe-ajax+mock RequireJS项目简单实例

main.js

主入口文件,用于配置require相关和初始化项目

vue+vue-router+requirejs+xe-ajax+mock RequireJS项目简单实例

router/index.js

配置路由信息

vue+vue-router+requirejs+xe-ajax+mock RequireJS项目简单实例

mock 主入口文件,用于安装Mock及修改全局配置

mock/index.js

vue+vue-router+requirejs+xe-ajax+mock RequireJS项目简单实例

定义Mock虚拟服务

mock/json/api/user/index.js 

vue+vue-router+requirejs+xe-ajax+mock RequireJS项目简单实例


接下来就可以在vue实例里直接调用api接口了

views/home.html

首页vue视图模板

vue+vue-router+requirejs+xe-ajax+mock RequireJS项目简单实例

views/home.js

首页vue渲染文件

vue+vue-router+requirejs+xe-ajax+mock RequireJS项目简单实例

打开界面可以看到一个数据列表,而不依赖后台服务

到此一个简单的例子就结束!


XEAjaxMock 对虚拟服务目录结构不限制,当虚拟服务越来越多时,统一目录结构可维护性会更好

ES6、Vue、VueRouter、VueI18n、ElementUI、VXEAjax、Mock 项目 点击查看 
ES6、Vue、VueRouter、VueI18n、ElementUI、XEAjax、Mock 项目 点击查看 
ES6、Vue、VueRouter、XEAjax、Mock 项目 点击查看 
RequireJS、Vue、VueRouter、VueI18n、XEAjax、Mock 项目 点击查看 
RequireJS、Vue、VueRouter、VueI18n、VXEAjax、Mock 项目 点击查看
更多详细说明请查看 Mock插件文档