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