1. 异步请求

在实际的应用开发中，与后端交互，进行异步请求是很常见的需求

1.1 axios

npm i axios

1.2 请求

// home.vue
<template><div class="home">Home</div>
</template><script>
import axios from 'axios';
export default {name: 'home',data() {return {items: []}},created() {axios({url: 'http://localhost:7777/items'}).then(res => {this.items = res.data;});}
}
</script>

2. 跨域

vue-cli 提供了一个内置基于 node 的 webserver ，我们可以使用它提供的 proxy 服务来进行跨域请求代理

2.1 vue.config.js

在项目的根目录下创建一个 vue.config.js 的文件，通过 npm run serve 启动服务的时候，会读取该文件

2.2 跨域请求代理配置

// vue.config.js
module.exports = {devServer: {proxy: {'/api': {target: 'http://localhost:7777',pathRewrite: {'^/api': ''}}}}
}

修改配置文件，需要重启服务：npm run serve

// home.vue
<script>
...
created() {axios({url: '/api/items'}).then(res => {this.items = res.data;});
}
...
</script>