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

Posted 2020-10-28 kiscon

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