技术小白也能懂的Vue CLI模拟数据入门指南

**引言** 

在Vue CLI中，模拟数据是一种非常有用的工具，它可以帮助我们在开发过程中模拟真实的数据，从而方便地进行调试和测试。本文将详细讲解在Vue CLI中模拟数据的两种常用方法，分别是使用vue-resource和json-server，并提供详细的配置和使用步骤。

**一、使用vue-resource模拟数据** 

vue-resource是一个轻量级的Vue.js HTTP请求库，它提供了丰富的API，可以方便地进行HTTP请求。在Vue CLI中，我们可以使用vue-resource来模拟数据。

**1. 安装vue-resource** 

npm install vue-resource --save

**2. 在main.js中引入vue-resource模块** 

Vue.use(vueResource)

**3. 在组件中使用vue-resource模拟数据** 

export default {
data() {
return {
users: []
}
},
created() {
this.$http.get('http://localhost:3000/users').then(response => {
this.users = response.data
})
}
}

在上面的示例中，我们在组件的created钩子函数中使用$http.get方法发送了一个HTTP请求，请求的URL为'http://localhost:3000/users'，然后将请求的结果赋值给users数据。

**二、使用json-server模拟数据** 

json-server是一个轻量级的模拟服务器，它可以轻松地创建和管理模拟数据。在Vue CLI中，我们可以使用json-server来模拟数据。

**1. 安装json-server** 

npm install json-server --save-dev

**2. 创建一个模拟数据文件** 

db.json
{
"users": [
{
"id": 1,
"name": "John Doe"
},
{
"id": 2,
"name": "Jane Doe"
}
]
}

**3. 启动json-server** 

json-server --watch db.json

**4. 在Vue CLI中配置proxyTable** 

在Vue CLI的配置文件vue.config.js中，我们需要配置proxyTable，将请求代理到json-server。

module.exports = {
devServer: {
proxyTable: {
'/api': {
target: 'http://localhost:3000',
changeOrigin: true
}
}
}
}

**5. 在组件中使用json-server模拟数据** 

export default {
data() {
return {
users: []
}
},
created() {
this.$http.get('/api/users').then(response => {
this.users = response.data
})
}
}

在上面的示例中，我们在组件的created钩子函数中使用$http.get方法发送了一个HTTP请求，请求的URL为'/api/users'，然后将请求的结果赋值给users数据。

**总结** 

本文详细讲解了在Vue CLI中模拟数据的两种常用方法，分别是使用vue-resource和json-server，并提供了详细的配置和使用步骤。希望本文能够帮助您快速上手Vue CLI的模拟数据功能，并掌握相关的配置和使用技巧。