vue脚手架

1. vue-cli中使用路由

1. 把路由相关页面创建好
2. 到src->router->index.js文件下，来进行配置路由
   2.1 先引用
   2.2再使用

2. 使用 axios 请求数据

1. axios 请求环境配置

1. npm install --save axios下载axios
2. 在src文件加下的main.js中添加

import axios from 'axios'
Vue.prototype.axios = axios

3. 实现网络请求

2. Axios–综合交互post get请求

• this.axios(utl:‘请求地址’,method:‘请求方式’,data/params:{k:v}).then((ok)=>{})
• 使用get发送数据的时候 使用params：{key:val}发送数据
• 使用post发送数据需要使用 var param=new URLSearchParams();修改传参方法
• 使用param.append(“uname”,“xixi”)添加数据并且使用data发送数据

get方式：

this.axios({
    method:"get",
    url:"http://localhost:3000/get",
    params:{
        name:"mgd"
    }
}).then((data)=>{
    console.log(data)
})

post方式

var param=new URLSearchParams();
param.append("uname","mgd");
this.axios({
    method:"post",
    url:"http://localhost:3000/post",
}).then((data)=>{
    console.log(data);
})

3. mock模拟数据

1. mock数据

1. 在前端开发过程中，有后台配合是很必要的。但是如果自己测试开发，或者后台很忙，没时间，那么我们需要自己提供或修改接口。
2. npm install --save mockjs
3. 在src下创建相关文件与文件夹
   
   设置请求文件index.js

const Mock=require("mockjs");
// 格式：Mock.mock(设置请求地址,post/get,返回的数据)
Mock.mock("/mgd","get",require("./json/haha.json"));
Mock.mock("/lpb","post",require("./json/heihei.json"));

引用mock在main.js

require("./mock");//引用mock

请求

this.axios({
    method:"get",
    url:"/mgd"
}).then((data)=>{
    console.log(data);
})