创建项目

课程目标

创建vue项目的步骤
封装axios
vue项目中的跨域问题
配置不同环境常量值
请问应该如何配置线上（生产）和开发的接口?

一、创建vue项目的步骤

npm install -g @vue/cli 下载脚手架
vue --version 检测版本
vue create 项目名称

回车
npm run serve 运行
项目初始化

pubilc 中index.html中的title改为自己项目呢的名字
将浏览器的地址icon，改为自己的login
打开百度，寻找一张图片，进行下载
百度搜索icon图标在线转换器

将自己下载的图片放到这个原地图像，选择尺寸，即可生成
将生成的icon图标放到public中，打开index.html的图标修改我的图标的名称，修改成功

配置vue.config.js

在当前项目的根目录下创建一个vue.config.js文件
配置内容

整合第三方库
- 安装axios npm install axios --save
- 安装pubsub-js,实现非父子组件间通信
- npm install pubsub-js --save
- 安装ElementUI npm install element-ui --save
- 对elementui的使用配置
- 配置内容在main.js文件中
- //Vue.config.productionTip = false的切换配置，
process.env.NODE_ENV检测当前是开发环境还是生产环境，

可以打印出console.log(process.env.NODE_ENV)
1. npm run serve 执行这条命令时，是开发环境 development
2. npm run build 执行这条命令时，是生产环境 production
3. false是开发环境，Vue提供很多的警告来调试代码
4. true是生成环境，警告却没有用，反而会增加应用的体积
自动将生产环境和开发环境进行自动切换的配置

Vue.config.production = process.env.NODE_ENV === 'procuction'
二、封装axios对象

在 src 目录下创建 utils 目录及 utils 下面创建 request.js 文件。

主要在request文件中主要是配置axios

request.js内容配置

可参考官网： github.com/axios/axios… github.com/axios/axios…

测试测试封装的 Axios 先在public创建一个db.json文件，
在HelloWord的组件，将request文件人引入 import request from "../utils/request"文件

1. pubsub.js是什么

pubsub可以帮助我们进行非父子之间的通信，他的原理就是结合了消息的发布以及订阅模式

2. ElementUI是什么

element是饿了么平台推出的一套基于Vue.js开发的后台页面组件库

官网：element.eleme.cn/#/zh-CN

3. 为什么要使用elementui

因为elementui帮助我们提供了很多的组件，帮助我们提高我们的开发效率，帮助我们节省一些不必要的代码

4. 总结：

在request.js文件中是对axios的配置，
在test.js文件中是发送请求，导出
在组件中引入请求数据
三个文件的详细代码如下： request.js代码：

test.js代码：

组件中代码

三、vue项目中的跨域问题

造成跨域问题的原因原因：不同域名，不同端口，不同协议以及ip地址的访问都会产生跨域，跨域只存在浏览器端

同源策略：指协议，域名，端口，都相同，有一个不同就会产生跨域。

解决跨域的方式

通过代理请求的方式解决，将API请求通过代理服务器请求到API服务器。
开发环境中，在vue.config.js文件中使用devServer.proxy进行代理配置
参考：cli.vuejs.org/zh/config/#…

代理解决跨域的配置

在vue.config.js中
module.exports = {
    devServer:{
    
        proxy:{
        //配置代理的名称，/dev-api = http://localhost:8001
            "/dev-api":{
             target:"http://localhost:8001",//目标地址，请求的地址
                changOrigin：true//开启代理
                pathRewrite:{
                    "^/dev-api":"",//设置为空
                }
            }
        }
    }
}

四、配置不同环境常量值

(项目开发的时候用的测试接口，项目上线的时候用的正式接口)

在src根目录下创建一个名为.env.development（开发）文件和一个名为.env.production（生产）文件
配置开发接口地址和生产接口地址的切换
内容的配置在.env.development文件中配置

必须使用VUE_APP_开头的变量会被webpack自动加载
定义请求的基础URL,方便跨域请求时使用

VUE_APP_SERVICE_URL = "http://localhost:8001"
VUE_APP_BASE_API = "/dev-api"

生产.env.production文件中配置

 VUE_SERVICE_URL = "http://www.baidu.com"
 VUE_APP_BASE_API = "/pro-api"

进项测试
在main.js文件中进行测试

consol.log(process.env.VUE.APp_SERVICE_URL),在打包之后打印的会自动变为生成.env.production中的地址

在代理中将target："地址",变为process.env.VUE.APp_SERVICE_URL这个接口地址

将代理的配置修改一下：
[process.env.VUE_APP_BASE_API]:{
    target:process.env.VUE.APp_SERVICE_URL,
    changOrigin:true,
    pathRewrite:{
        <!--"^/dev-api":""-->
        ['^'+process.env.VUE_APP_BASE_API]:""
    }
}

五、请问应该如何配置线上（生产）和开发的接口?

vue为我们提供了两个文件，一个为.env.developement文件和.env.production文件,在这里面我们可以配置我们生产和开发的接口地址,里面的内容必须是以VUE_APP_开头，webpack会自动加载我的内容

Vue-cli4.x创建项目