vue cli中使用mockjs模擬資料

2021-08-22 04:46:34 字數 1294 閱讀 7704

在日常開發中是否遇到過這種情況:在進行前後端分離開發的專案時,我們前端的頁面寫好了,但是後端的介面還差一點,這個時候我們只能等後端把介面實現好或者我們自己模擬一些假資料,無論那種方法都會浪費大量時間。好在mockjs很好的幫我們解決了這個煩惱。

npm install mockjs
新建乙個mock.js檔案,在檔案中編寫mock資料,示例:

//引入mockjs

const mock = require('mockjs');

//獲取mock.random物件

const random = mock.random;

//mock一組資料

const newsdata = function

() news.push(newobject)

}return

}mock.mock('/news/index', 'get', newsdata); //mock(url,post/get/put/delete,資料)

// the vue build version to load with the `import` command

// (runtime-only or standalone) has been set in webpack.base.conf with an alias.

import vue from 'vue'

import router from './router'

// require('./mock.js')

import './mock.js'

//引入mock

vue.config.productiontip = false

/* eslint-disable no-new */

new vue()

class="hello">

v-for="(item, index) in newslistshow"

:key="index">

}div>

div>

div>

template>

import api from '@/axios/api.js'

export default

},created() ,

methods: )}}}

script>

scoped>

style>

參考 jason齊齊

Vue cli專案中使用mockjs模擬資料

const mock require mockjs 獲取mock物件 const random mock.random 獲取random物件,隨機生成各種資料,具體請翻閱文件 const domain 定義預設網域名稱,隨便寫 const code 200 返回的狀態碼 隨機生成文章資料 const...

vue cli3中mockJs的使用

mock 作用 生成隨機資料,攔截ajax請求 安裝 npm install mockjs 核心 mock.mock mock.random 隨機生成資料 安裝完成後,在src目錄下新建mock資料夾,建立mock index.js作為配置檔案 import mock from mockjs 設定2...

vue cli中使用vuex的方式

一般來講,我們都會採用vue cli來進行實際的開發,在vue cli中,開發和呼叫方式稍微不同。index.html main.js components store index.js 我們組裝模組並匯出 store 的地方 state.js 跟級別的 state getters.js 跟級別的 ...