1.执行npm install
2.安装stylus，(npm install之后node_module已经有了stylus，但还是要再安装一次)
npm install --save-dev stylus-loader stylus
安装了之后,应该就可以直接在vue文件中写stylus了
3.配置webpack.base.js 快捷导入组件和common目录下的资源
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
'components':path.resolve(__dirname,'../src/components'),
'common':path.resolve(__dirname,'../src/common')
}4.配置api调用
本地调用的话,开启本地localhost,并在localhost下建项目文件夹如ybjccc/api/v1/test/
在test文件夹下放php接口文件
a.npm install superagent -D
b.在main.js引入api.js
// 引用API文件
import api from './config/api'
// 将API方法绑定到全局
Vue.prototype.$api = api c.编写api.js http://blog.csdn.net/fungleo/article/details/53202276 // 配置API接口地址
var root = 'http://xxxx';
// 引用superagent
var request = require('superagent'); // 自定义判断元素类型JS function toType(obj) {
return ({}).toString.call(obj).match(/\s([a-zA-Z]+)/)[1].toLowerCase()
} // 参数过滤函数
function filter_null(o) {
for (var key in o) {
if (o[key] == null) {
delete o[key]
}
if (toType(o[key]) == 'string') {
o[key] = o[key].trim()
if (o[key].length == 0) {
delete o[key]
}
}
}
return o
}
/*
接口处理函数
这个函数每个项目都是不一样的，我现在调整的是适用于
https://cnodejs.org/api/v1 的接口，如果是其他接口
需要根据接口的参数进行调整。参考说明文档地址：
https://cnodejs.org/topic/5378720ed6e2d16149fa16bd
*/
function _api_base(method, url, params, success, failure) {
var r = request(method, url).type('text/plain')
if (params) {
params = filter_null(params);
if (method === 'POST' || method === 'PUT') {
if (toType(params) == 'object') {
params = JSON.stringify(params);
}
r = r.send(params)
} else if (method == 'GET' || method === 'DELETE') {
r = r.query(params)
}
}
r.end(function(err, res) {
if (err) {
alert('api error, HTTP CODE: ' + res.status);
return;
}
if(res.statusCode==200)
{
var obj=JSON.parse(res.text);
if(success)
{
success(obj);
}
}
else
{
var obj=JSON.parse(res.text);
if(failure)
{
failure(obj)
}
else
{
alert("api statuscode :"+res.statusCode);
}
return;
}
});
}; // 返回在vue模板中的调用接口
export default {
get: function(url, params, success, failure) {
return _api_base('GET', root + '/' + url, params, success, failure)
},
post: function(url, params, success, failure) {
return _api_base('POST', root + '/' + url, params, success, failure)
},
put: function(url, params, success, failure) {
return _api_base('PUT', root + '/' + url, params, success, failure)
},
delete: function(url, params, success, failure) {
return _api_base('DELETE', root + '/' + url, params, success, failure)
},
} 调用实例 methods: {
get_data: function(params) {
var v = this
if (!params) params = {}
// 我们这里用全局绑定的 $api 方法来获取数据，方便吧~ v.$api.get('index.php','',function (r) {
console.log(r.result);
})
},
}
基本框架
http://blog.csdn.net/fungleo/article/details/53213167