mock.js如何在Vue项目中使用-创新互联

这篇文章给大家介绍mock.js如何在Vue项目中使用，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。

创新互联-专业网站定制、快速模板网站建设、高性价比隰县网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式隰县网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖隰县地区。费用合理售后完善，10年实体公司更值得信赖。

在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中的自定义列模板


  
  
   
    
     姓名: {{ scope.row.name }}
     住址: {{ scope.row.address }}
     
      {{ scope.row.name }}

编辑

删除

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

现在的网页显示效果如下

mock.js如何在Vue项目中使用

5. 安装mockjs 和axios

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

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

request.js

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

getData.js

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

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（数据获取与绑定，设置表格居中）


   
   
    
     
      姓名: {{ scope.row.name }}
      住址: {{ scope.row.address }}
      
       {{ scope.row.name }}

邮箱: {{ scope.row.email }}

性别: {{ scope.row.isMale }}

昵称: {{ scope.row.nickName }}

手机号: {{ scope.row.phone }}

头像：

编辑删除

关于mock.js如何在Vue项目中使用就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。

平武建站

mock.js如何在Vue项目中使用-创新互联

其他资讯