具体来说，要讲解如何在Vue CLI 3.0脚手架中使用mock数据，我们需要以下内容：
- 确定如何安装和使用Vue CLI 3.0，以及搭建本地开发环境。
- 介绍如何使用Mock.js模拟数据，并在Vue项目中引入。
- 在Vue脚手架项目中，讲解如何开启和使用webpack-dev-server的proxy功能，和结合Mock.js进行数据模拟。
- 通过具体的示例场景说明Mock.js和webpack-dev-server proxy如何配合使用。
接下来，我们详细讲解上述内容：
1. 安装和使用Vue CLI 3.0
Vue CLI 3.0 是Vue.js官方出品的脚手架工具，提供了一整套前端项目工程化解决方案，包括项目初始化，本地开发，打包等功能。
安装和使用方法如下：
# 全局安装Vue CLI 3.0（如果已安装过, 可以直接跳过）
npm install -g @vue/cli
# 创建一个新项目
vue create my-project
# 进入项目目录
cd my-project
# 启动本地开发服务器
npm run serve
这样就成功启动了本地开发服务器，可以通过 http://localhost:8080 访问你的项目。
2. 使用Mock.js模拟数据
Mock.js是一款前端数据模拟工具，它提供了丰富的数据模板和随机数据生成工具，可以快速方便地生成各种测试数据。
安装方法如下：
# 安装Mock.js
npm install mockjs --save-dev
在Vue项目中使用Mock.js的步骤如下：
- 在main.js中引入Mock.js库。
import Mock from 'mockjs'
- 在需要使用Mock数据的文件中，编写Mock数据模板，并使用Mock.mock()方法生成数据。
import Mock from 'mockjs'
const data = Mock.mock({
'list|1-10': [{
'id|+1': 1,
'name': '@name',
'age|18-30': 1
}]
})
export default data
这里我们编写了一个list数据模板，包含了10条数据记录，每条记录包括id、name、age三个字段。
- 在需要使用Mock数据的Vue组件中，使用import导入Mock数据，并在data中挂载。
import MockData from '@/mock/data.js'
export default {
data () {
return {
list: MockData.list
}
}
}
这样，我们就把Mock数据挂载到了Vue组件中，现在可以在Vue组件的template中使用这些数据了。
3. 开启和使用webpack-dev-server的proxy功能
Vue CLI 3.0脚手架项目中，本地开发服务器使用的是webpack-dev-server，它内置了proxy服务器，可以将请求转发到其他服务器上。
在开发中，我们通常将请求转发到本地的Mock数据服务上，从而获得更灵活的Mock数据模拟功能。
开启proxy功能的步骤如下：
- 在根目录下创建vue.config.js文件。
// vue.config.js
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'http://localhost:3000',
changeOrigin: true
}
}
}
}
这里，我们使用了devServer的proxy选项，将所有以/api开头的请求都转发到http://localhost:3000。
- 在Mock数据服务中，提供对应的Mock数据接口。
例如，在本地启动一个Mock数据服务，假设此服务端口为3000，我们可以提供如下Mock接口：
// mock/api.js
const Mock = require('mockjs')
module.exports = function (app) {
app.get('/api/list', function (req, res) {
const data = Mock.mock({
'list|1-10': [{
'id|+1': 1,
'name': '@name',
'age|18-30': 1
}]
})
res.json(data)
})
}
- 在Vue组件中，使用axios等HTTP库请求Mock数据接口。
import axios from 'axios'
axios.get('/api/list').then(res => {
this.list = res.data.list
})
这里，我们使用了axios库，向本地的Mock数据服务请求Mock数据接口，然后将数据挂载到Vue组件的data中。
4. 示范场景
接下来，我们通过两个具体的示例场景，说明如何使用Mock.js和webpack-dev-server的proxy配合使用。
示例1：模拟登录
我们使用Mock.js模拟登录数据，通过webpack-dev-server代理到本地服务端口，从而达到模拟登录的效果。
- 编写mock数据模板。
// mock/login.js
const Mock = require('mockjs')
module.exports = function (app) {
app.post('/api/login', function (req, res) {
const data = Mock.mock({
'id|+1': 1,
'username': '@name',
'token': '@guid'
})
res.json(data)
})
}
- 配置webpack-dev-server的proxy选项。
// vue.config.js
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'http://localhost:3000',
changeOrigin: true
}
}
}
}
- 在Vue组件中使用Mock.js和axios发起请求。
import axios from 'axios'
import Mock from '@/mock/login.js'
export default {
methods: {
login () {
axios.post('/api/login', {
username: 'admin',
password: '123'
}).then(res => {
Mock(res.data)
this.$router.push('/home')
})
}
}
}
这里，我们使用了Mock.js模拟了一个登录数据，并将数据返回给axios。在登录成功后，将路由跳转到home页面。
示例2：模拟分页数据
我们使用Mock.js模拟了一个分页数据，通过webpack-dev-server代理到本地服务器，从而达到模拟分页数据的效果。
- 编写mock数据模板。
// mock/pages.js
const Mock = require('mockjs')
module.exports = function (app) {
app.get('/api/pages', function (req, res) {
let { page = 1, limit = 10 } = req.query
const data = Mock.mock({
[`list|${limit}`]: [{
'id|+1': (page - 1) * limit + 1,
'name': '@name',
'age|18-30': 1
}]
})
res.json(data)
})
}
- 配置webpack-dev-server的proxy选项。
// vue.config.js
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'http://localhost:3000',
changeOrigin: true
}
}
}
}
- 在Vue组件中使用Mock.js和axios发起请求。
import axios from 'axios'
import Mock from '@/mock/pages.js'
export default {
data () {
return {
page: 1,
limit: 10,
list: []
}
},
created () {
this.getData()
},
methods: {
getData () {
axios.get('/api/pages', {
params: {
page: this.page,
limit: this.limit
}
}).then(res => {
Mock(res.data)
this.list = res.data.list
})
}
}
}
这里，我们使用了Mock.js模拟了一个分页数据，并将数据返回给axios。在组件创建时，发起了分页数据请求，并更新list数据。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：详解Vue CLI 3.0脚手架如何mock数据 - Python技术站
微信扫一扫 
支付宝扫一扫 