vue基础教程

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