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视图文件
首先对于要支持低版本浏览器(比如IE11以下)的情况下,使用babel-polyfill转码用于支持低版本浏览器。
index.html
引入polyfill.js 和 require.js
main.js
主入口文件,用于配置require相关和初始化项目
router/index.js
配置路由信息
mock 主入口文件,用于安装Mock及修改全局配置
mock/index.js
定义Mock虚拟服务
mock/json/api/user/index.js
接下来就可以在vue实例里直接调用api接口了
views/home.html
首页vue视图模板
views/home.js
首页vue渲染文件
打开界面可以看到一个数据列表,而不依赖后台服务
到此一个简单的例子就结束!
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插件文档