最近开发了一个单页面应用，但不是基于vue-cli开发。
项目整体使用ES5开发，采用将require与vue相结合的AMD开发模式。
一、优势简介
1、RequireJS 是一个JavaScript模块加载器。它非常适合在浏览器中使用，提高代码的加载速度和质量。
2、Vue是一套用于构建用户界面的渐进式框架。特点自底向上逐层应用开发，且Vue 的核心库只关注视图层。
3、开发简单，可用于轻量级的单页面应用开发。
二、核心区域
1、main.js : 在其中使用 require() 来加载所有你需要运行的scripts。这可以确保你所有的scripts都是在这里加载的, 你可以指定 data-main script 使用异步加载。
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=UTF8"/>
<script type="text/javascript" data-main="js/main" src="js/require.js" charset="UTF8"></script>
</head>
<body>
</body>
</html>
2、采用require.config进行配置加载，然后使用require加载。
// mian.js
require.config({
baseUrl: '../',
urlArgs: 'v='+(new Date()).getTime(),
paths: {
"vue": "public/js/vue.min",
"ELEMENT": "public/js/element.min",
"less": "public/js/less.min",
"axios":"public/js/axios.min",
"constant": "util/constant",
"request": "util/request",
"orderServer": "server/orderServer",
"component": "component",
"@": "page",
},
map: {
'*': {
'text': 'html/js/require/require-text', // path to text
'css': 'html/js/require/require-css', // path to css
'less': 'html/js/require/require-less' // path to less
}
},
shim: {
'ELEMENT':{
deps: ['vue', 'css!/html/element-ui/lib/theme-chalk/index']
}
},
});
require([
"vue",
"ELEMENT",
'@/app/index',
], function(Vue, ELEMENT, app) {
Vue.use(ELEMENT)
var app = new Vue({
el: '#app',
template: "<div><app></app></div>",
components: {
app
},
data: {
},
mounted: function () {
},
created: function() {
},
methods: {
}
})
})
（1）config，require基础配置
1）baseUrl：用于加载模块的根路径。
2）urlArgs：清楚js缓存
3）paths:用于映射不存在根路径下面的模块路径。
4）shim:配置在脚本/模块外面并没有使用RequireJS的函数依赖并且初始化函数。
如所依赖的地方放文件没有采用require模块话开发，则需要配置在shim中。有当require获取不到模块时才会去shims中寻找。
5）map：适用于调用了define()并将其注册为 “匿名模块” 的真正AMD模块脚本。
在map中支持 “ * ”，对于所有的模块加载，都可以使用本map配置。
（2）require/define
require/define: 传两个参数，第一个参数是加载所依赖的模块，数组格式；第二个参数是回调函数，当前面的模块加载完成后执行回调函数。加载的模块会以参数的形式传人该函数。
// app.js
define([
"constant",
"component/progressSwipper/index",
"orderServer",
'text!@/app/index.html',
'less!@/app/index'
], function(constant, progressSwipper, orderServer, tpl) {
return {
template: tpl,
components: {
progressSwipper,
},
data() {
return {
title: 'hello world'
}
},
mounted: function () {
},
created: function() {
},
methods: {
},
}
});
三、http
1、二次封装axios
// request.js
define(["axios"], function(axios) {
/**
* ajax请求配置
*/
// axios默认配置
axios.defaults.timeout = 300000; // 超时时间
axios.defaults.baseURL = '/'; // 默认地址
//整理数据
axios.defaults.transformRequest = function (data) {
//data = Qs.stringify(data);
data = JSON.stringify(data);
return data;
};
// 路由请求拦截
// http request 拦截器
axios.interceptors.request.use(
config => {
config.headers['Content-Type'] = 'application/json;charset=UTF-8';
return config;
},
error => {
return Promise.reject(error.response);
}
);
// 路由响应拦截
// http response 拦截器
axios.interceptors.response.use(
response => {
if (response.status == "404") {
console.log("response.data.resultCode是404")
return response.data;
// window.location.href='error.html'
// return Promise.reject('404')
} else {
return response.data;
}
},
error => {
return error.response // 返回接口返回的错误信息
// return Promise.reject(error.response) // 返回接口返回的错误信息
}
);
return {
get: function(url, params) {
return axios({
methods: 'get',
url: url,
params: params || {}
});
},
post: function(url, data) {
return axios({
methods: 'post',
url: url,
data: data || {}
});
},
all: function(arr) {
return axios.all(arr);
},
};
});
2、定义server模块
// orderServer.js
define(["request"], function(request) {
return {
/**
* 获取用户基本信息
* @param {*} params
*/
getBasicData: function (params) {
return request.get('/purchase/member/business.php?do=getMemberData', params);
},
/**
* 储存用户基本信息
* @param {*} params
*/
saveFilterData: function (params) {
return request.post('/purchase/member/business.php?do=saveMemberData', params);
},
};
});
详见代码 https://github.com/ghSailing/vue-require
代码持续更新中。。。
