详解Vue CLI 3.0脚手架如何mock数据

具体来说，要讲解如何在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技术站