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.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 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.id }} 姓名: {{ scope.row.name }}
住址: {{ scope.row.address }}
{{ scope.row.name }} 邮箱: {{ scope.row.email }}
性别: {{ scope.row.isMale }}
昵称: {{ scope.row.nickName }}
手机号: {{ scope.row.phone }}
头像:
编辑 删除
10.再次运行
鼠标放在姓名上,会有更多信息显示
显示测试的数据1000条
关于mock.js如何在Vue项目中使用就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。
网站题目:mock.js如何在Vue项目中使用-创新互联
文章链接:http://myzitong.com/article/coegjj.html