在vue-cli项目中mockjs和vConsole的使用

mockjs使用

1.安装npm install mockjs

2.在src/assets目录下创建个util文件夹，并在里新建一个文件mock.js

如下：

[code]const Mock = require(‘mockjs‘)
const Random = Mock.Random

export default Mock.mock(‘api/mocktest‘,createData)

[code]function createData () {
let articles = []
for (let i = 0; i < 9; i++) {
let newArticleObject = {
title: Random.csentence(5, 10),
thumbnail_pic_s: Random.dataImage(‘300x250‘, ‘mock的图片‘),
author_name: Random.cname(),
date: Random.date() + ‘ ‘ + Random.time()
}
articles.push(newArticleObject)
}
return {
articles: articles
}
}
3.引用，可以在main.js中全局引用require(‘./assets/util/mock.js‘)
4.在vue组件中使用
　axios.get(‘api/mocktest‘).then(res => {
　　this.items = res.data.articles
　 console.log(res.data.articles)
　})

vConsole使用

1.安装npm install vconsole

2.在src/assets目录下创建个util文件夹，并在里新建一个文件vconsole.js

　例如：　

[code]import Vconsole from ‘vconsole‘
let vConsole = new Vconsole()
export default vConsole

3.引用，可以在main.js中全局引用require(‘./assets/util/vconsole.js‘)

4.启动项目页面中就会出现vconsole控件

5.原理

 (1)重写console

 (2)用window.onerror捕获并上报Js错误