mock.js如何在Vue项目中使用-创新互联
这篇文章给大家介绍mock.js如何在Vue项目中使用，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。
创新互联-专业网站定制、快速模板网站建设、高性价比隰县网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式隰县网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖隰县地区。费用合理售后完善，10年实体公司更值得信赖。
在Vue项目中使用mock.js
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.date }}
姓名: {{ 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现在的网页显示效果如下
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 servicegetData.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.id }}
姓名: {{ scope.row.name }}
住址: {{ scope.row.address }}
{{ scope.row.name }}
邮箱: {{ scope.row.email }}
性别: {{ scope.row.isMale }}
昵称: {{ scope.row.nickName }}
手机号: {{ scope.row.phone }}
头像：
编辑
删除
