在vue-cli搭建的項目中使用mockjs

在使用vue開發的時候，一直疑惑與mockjs怎麼用，開了mockjs的開發文檔，仍是一臉矇蔽，無從下手！mockjs在先後端分離開發上進行模擬數據，是不可避掉的一環。在網上看了一些博文還有查閱了其文檔，終於搞明白了它的基礎用法，有什麼不完整的地方，還請你們多多指正。

• 搭建一個vue項目

# 全局安裝 vue-cli
$ npm install --global vue-cli
# 建立一個基於 webpack 模板的新項目
$ vue init webpack vue-mock
# 安裝依賴，走你
$ cd my-project
$ npm install

• 安裝mockjs

npm install mockjs --save-dev

• 啓動項目

npm run dev

• 建立一個mockjs文檔
  此時能夠看到相似於這樣的一個項目結構

其中mockjs是我本身建立的一個mock文件，用於存放模擬的數據

項目搭建起來以後，可以在package.json裏面看到 "mockjs": "^1.0.1-beta3" 這塊代碼，就說明mockjs已經引入載入成功，就能夠開始咱們下一步的操做；
我所理解的有兩種方法使用mockjs，第一種是比較簡答你的使用，還有一種是模塊化的使用

簡單的使用

（1）在項目中的mock.js文件中，寫入模擬的數據，此時咱們須要參照一下mockjs文檔中的這樣一塊

//參照mockjs的文檔，進行操做
// 配置 Mock 路徑
require.config({
    paths: {
        mock: 'http://mockjs.com/dist/mock'
    }
})
// 加載 Mock
require(['mock'], function(Mock){
    // 使用 Mock
    var data = Mock.mock({
        'list|1-10': [{
            'id|+1': 1
        }]
    })
    // 輸出結果
    document.body.innerHTML +=
        '<pre>' +
        JSON.stringify(data, null, 4) +
        '</pre>'
})

（2）咱們在mockjs中進行如下編寫

//引入mockjs
const Mock = require('mockjs')
//使用mockjs模擬數據
Mock.mock('/api/data', (req, res) => {
    return {
        data: ['a','b']
    }
})

同時，不要忘記了，須要在main.js裏面引入該文檔，告訴程序，使用了mockjs，來進行數據模擬

require('./mock')//此部分引入的是咱們所編寫的mockjs文檔

（3）重寫了Hello.vue

hello.vue中的AJAX請求與mockjs裏裏面的url相同，這個時候咱們能夠看到頁面上的顯示以下圖

模塊化的使用

（1）在build的文件夾下面的dev-server文件中進行配置

首先，須要引入mockjs =》 require('mockjs')
其次在dev-server裏面配置
app.use('/api/data', (req, res) => {
  res.send({
    data:['a','s']
  })
})

此塊代碼寫到以下圖所在的區域

其中res.send的意思就是把它所包含的數據拋出去，使AJAX可以請求的到，使用這個方法的時候，咱們不須要在main.js裏面引入就能夠直接使用，可是有一點很差的是，這種方法，由於卸載配置裏面，比較混亂，跟咱們模塊化開發的意願相悖，咱們能夠嘗試這把數據的這一塊單獨拿出去，咱們只須要在這裏面引用就能夠了；

把上面引入的mockjs注掉，把app.use改寫成app.use('/api', require('../src/mock.js'))的形式，其中api是根路徑，相似於router中的base路徑，後面的require引入的是mock.js裏的數據
在mockjs文檔中，咱們進行一下數據改寫，以下圖所示

此時頁面顯示爲