在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錯誤