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

mockjs使用

1.安装npm install mockjs

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

　例如：

const Mock = require(‘mockjs‘)
const Random = Mock.Random

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

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

　例如：　

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错误