vue项目中的注意点(axios、传参方式、vant安装）

使用axios调取接口

• 首先在项目中通过npm安装axios，npm i axios -S
• 在main.js中引入，import axios from "axios"
• 在main.js中，在vue原型上进行设置vue.prototype.$axios=axios

---

这样就设置好了，然后在各个组件中使用了。

this.$axios({
	url:url,
	methods:"get",
	params:{}
})
this.$axios({
	url:url,
	methods"post",
	data:{}
})

解决跨域问题

在vue.config.js中进行设置
在modules.exports中写

  devServer:{
    proxy:{
      "/api":{
        target:"公共url",    // 设置公共url
        ws:true,               // 支持跨域，默认为true
        changeOrigin:true,     // 代理服务器
        pathRewrite:{            // 地址重写为
          "^/api":""             // 正则匹配
        }
      }
    }
  }

---

api文件夹

我们还可以在src文件夹中创建一个api文件夹，里面可以存放各个组件封装的方法的js文件
还有一个知识点就是拦截器，拦截器分为请求拦截和响应拦截

1. 请求拦截，是你在发送数据时进行拦截，可以在这个阶段进行一些操作
2. 响应拦截，是服务器给你返回数据时进行拦截，一般来说进入这个阶段的时候，我们就是成功进入了接口，并获取到了数据，即使是反悔了err也是成功进入了接口，一般这种情况就是因为传的参数是不正确的，这个时候就要好好检查一下传过去的参数了

---

在api文件夹中创建一个index.js文件，里面放我们封装的axios请求拦截和响应拦截

import axios from "axios"   // 引入axios

axios.defaults.baseUrl = "/api"    // 将公共地址提取出来
axios.interceptors.request.use(config=>{    // 请求拦截
    // console.log(config,"请求拦截");
    // config.headers.token=123
    // config.headers.name ="joke"
    return config
},err=>console.log(err))

axios.interceptors.response.use(response=>{    // 响应拦截
    // console.log(response,"响应拦截");
    response=response.data
    return response
},err=>console.log(err))
export default axios   // 将axios导出出去

---

封装的axios使用：
在api文件中为组件创建一个js文件，例如list.js里面存放这个组件需要使用的方法，在这个js文件中首先要将我们封装好的axios导入：import axios from "import axios from "./index";"
然后创建方法并导出出去

export let fun= (url,type,data)=>{
    return axios({
        url:url,           // 请求地址   
        methods:type,    // get/post
        params:data    // 传参，对象形式
    })
}

在vue组建中使用js文件中封装的方法，要先将方法引入

import {fun} from "@/api/list.js"

fun(url,get,{data:data}).then(res=>console.log(res)).catch(err=>console.log(err))

如果是从同一个js文件中引入不同的方法，可以在花括号中直接添加，每个方法名之间用英文逗号隔开。

传参方式

• query string ：地址栏拼接
• formData：form表单提交方式
• request：data提交

---

request的数据形式：data:{name:1,age:2}

formData ：将request的数据形式转换为：?name=1age=2，拼接在url后面

query String形式需要安装qs，
1. 通过npm安装npm i qs
2. 在main.js中引入import qs from "qs"
3. 在vue原型中添加vue.prototype.$qs=qs
4. 使用this.$qs.stringify({name:1,age:2})

vant

vant是一个ui框架，一般用于制作手机app项目
如果我们做的是vue2项目，就用vant2，如果是vue3项目，就用vant3

---

安装vant

通过npm，npm i vant@latest-v2 -S
在main.js中导入

import Vant from 'vant';
import 'vant/lib/index.css';

Vue.use(Vant);

然后根据操作手册，在各个组建中将需要使用的模块引入就可以
大概操作如此，具体可以查阅vant官网vant官网地址