怎么在Vue项目中使用mock.js

这篇文章主要讲解了"怎么在Vue项目中使用mock.js"，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习"怎么在Vue项目中使用mock.js"吧！

在Vue项目中使用mock.js

• 开发工具选择：Vscode

1. 使用命令行创建 vue 项目（手动选择 Babel，Router，Vuex）

2. 导入 element-ui（为了显示效果好一点），命令行输入

npm i element-ui -S

3.在 main。js 中进行引用

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css';//样式文件一定要引入

Vue.use(ElementUI)

4.新建 src/views/main/List.vue 使用 elememnt-ui 中的自定义列模板

5.router/index.js配置如下

import Vue from 'vue'
import VueRouter from 'vue-router'
//导入组件
import List from '../views/main/List.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'List',
    component: List
  },

]

const router = new VueRouter({
  routes
})

export default router

现在的网页显示效果如下

5. 安装 mockjs 和 axios

npm install --save-dev mockjs
npm install --save axios
12

6.新建 api/getData.js 和 request.js

• request.js

import axios from 'axios'
const service = axios.create({
    baseURL : "http://localhost:8080",
})
export default service
12345

• getData.js

import axios from '../request'
//数据列表接口
export const getList = () => axios.get("/list")
123

7.在src下新建 mock/mockServer.js

import Mock from 'mockjs'
//import data from './data.json'

Mock.mock('http://localhost:8080/list', {
    code: 0, data:
    {
        'data|1000': [
            {   
                id: '@id',//随机id
                name: '@name',//随机名称
                nickName: '@last',//随机昵称
                phone: /^1[34578]\d{9}$/,//随机电话号码
                'age|11-99': 1,//年龄
                address: '@county(true)',//随机地址
                email: '@email',//随机邮箱
                isMale: '@boolean',//随机性别
                createTime: '@datetime',//创建时间
                avatar() {
                    //用户头像
                    return Mock.Random.image('100×100', Mock.Random.color(), '#757575', 'png', this.nickName)
                }
            }
        ]
    }

})

8.在 main.js 中导入 mockServer

import './mock/mockServer'

9.修改 src/views/main/List.vue（数据获取与绑定，设置表格居中）

感谢各位的阅读，以上就是"怎么在Vue项目中使用mock.js"的内容了，经过本文的学习后，相信大家对怎么在Vue项目中使用mock.js这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是，小编将为大家推送更多相关知识点的文章，欢迎关注！