vue项目实战-环境搭建

1、参考vue-cli使用教程，安装好项目和相关依赖
2、vue.config.js文件中配置端口号，格式检查，dist打包等常用配置

3、整合第三方库
安装axios处理异步请求 npm i -S axios
安装pubsub-js处理非/父子组件通信 npm i -S pubsub-js
安装Element Ui组件库 npm i element-ui -S
4、axios对象
①使用axios封装好的request对象
axios.get默认到public中找数据文件
axios已经封装好request方法，只要告诉请求的数据路径即可，不需要自己设置拦截器、以及导出request对象

②自定义封装Axios异步对象，需要export default导出

• 在utils>request.js中封装自定义的request对象
  
• 在api>test.js中引入封装的request对象，给request对象设置请求参数method/url等。
  
• 在components>HelloWorld.vue中调用服务请求Api,获取数据并且渲染到页面
  
  
  ③跨域请求、开发环境跨域
  （前端页面、后端api只要协议、域名、端口有一个不同都会产生跨域，所谓同源策略）
  - 复制mxg-msm项目，更名为axios-demo(作为本次的服务器)，并将vue.config.js中的端口配置成8001
  
  - 在mxg-msm的vue.config.js中配置代理服务器，解决跨域请求的问题
  
  - 在mxg-msm>test.js的所有请求路径url中加上 /dev-api 标识，
  npm run serve 重新启动项目（要保证服务器8001端口的axios-demo是开启的）
  即可以实现跨域数据请求
  
• 用常量BASE_URL接收标识 /dev-api ，字符串拼接。当请求地址改变时，可以实现一次性修改所有跨域请求地址
  
  
• 也可以去掉BASE_URL常量设置，utils>request.js 在自定义request对象时，可在baseURL中设置转交代理服务器处理标识，即 /dev-api
  

④不同环境变量配置（动态配置）和跨域（当需要修改跨域请求前缀标识时）