vue-cli的环境搭建和跨域请求基本设置

对vue初学者而言，脚手架的搭建是一个极其头疼的事情，还有想要通过vue的请求接口，处理后台数据，也需要一些操作，接下来依次说一下怎么解决这些问题。

第一 搭建vue-cli的环境

1： 安装好node环境，建议直接去node官网下载，手动安装，这样比较简单粗暴。

2：安装webpack，终端键入 npm install webpack -g

3：全局安装vue，终端键入 npm install -g vue

4：全局安装vue脚手架，终端键入 npm install -g vue-cli

5：使用脚手架创建新项目，你可以先使用cd命令，转到需要放置项目的目录，然后键入 vue init webpack pro-name(你要创建的项目名)，

　　接下来就是项目的各种配置，看不懂没有关系，每一步都按enter即可，如果你没有按照规范书写代码的习惯，当你看到Eslint的时候，按N键。

6：上一个步骤进行完毕以后，再安装项目的依赖文件，先cd转到项目的根目录，然后键入 npm install，安装完毕即可。

7：运行项目，在项目根目录下，键入 npm run dev，就可以看到一个vue-cli的案例地址，一般是http://localhost:8080,访问就看了vue项目了。

第二 跨域请求的设置

首先在项目的config文件夹中，找到index.js,你会看到dev属性下面的proxyTable的值为一个空的对象，即proxyTable:{},咱们要做的就是设置这个对象：

proxyTable:{

　　'/api':{

　　　　target:'http://127.0.0.1:8888/',  //这里设置你调用的接口域名和端口号，注意别忘了添加网络协议(http)

　　　　changeOrigin:true,

　　　　pathRewrite:{

　　　　　　'^/api':'/'   //这里理解成用‘/api’代替target里面的地址，然后在组件中我们调用接口的时候直接用api代替，比如我要调用' http://127.0.0.1:8888/aa'，直接写‘/api/aa’即可

　　　　}

　　}

}

以上设置完毕后，保存index.js,然后在项目的config文件夹中，找到dev.env.js文件，设置成以下形式，由于代码较少，可以直接全部复制粘贴。

'use strict'

const merge = require('webpack-merge') 

const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, { 

　　NODE_ENV: '"development"',//开发环境 

　　API_HOST:"/api/"

})

dev.env.js设置完毕后，需要重新启动项目，然后就可以调用你设置的域名的数据接口了，提示，要在vue中异步获取数据，需要使用axios模块，记得安装axios哦！