基于CodeIgniter&Vue-cli构建前后端分离

更改原控制器welcome
/controllers/welcome/index方法  移除加载视图代码
        $result=array(
            'user'=>'admin',
            'pass'=>123456,
            'u_id'=>753951
        );
        $data=array(
            'code'=>200,
            'msg'=>'请求成功',
            'data'=>$result
        );
        echo json_encode($data);

cnpm install webpack ci_vue

cnpm install axios --save-dev

import Axios from 'axios'
//配置全局
Vue.prototype.axios=Axios

html部分 在页面最下面添加
<div><button @click="getPhpData">getData</button></div>
<ul>
  <li>u_name:<span>{{user_info.user}}</span></li>
  <li>u_pass:<span>{{user_info.pass}}</span></li>
  <li>u_id:<span>{{user_info.u_id}}</span></li>
</ul>

js部分  初始data数据，添加方法getPhpData
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      user_info:{}
    }
  },
  methods:{
    getPhpData:function(){
      //es5
      // var this_=this
      // this.axios.get('http://localhost').then(function(res){
      //   if(res.data.code==200){
      //     this_.user_info=res.data.data
      //   }
      // }).catch(function(err){
      //   console.log(err)
      // })

      //es6
      this.axios.post('http://localhost').then(res=>{
        if(res.data.code==200){
          this.user_info=res.data.data
        }
      }).catch(err=>{console.log(err)})
    }
  }
}

在页头添加：指定访问，也可以设置为*或者多设置几个访问链接
header('Access-Control-Allow-Origin:http://localhost:8080');