這篇文章將為大家詳細講解有關如何在vue-cli項目中使用mock數(shù)據(jù)，文章內容質量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關知識有一定的了解。

讓客戶滿意是我們工作的目標，不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領域值得信任、有價值的長期合作伙伴，公司提供的服務項目有：域名注冊、雅安服務器托管、營銷軟件、網(wǎng)站建設、天峻網(wǎng)站維護、網(wǎng)站推廣。

項目是基于vue-cli的，首先必須搭建好vue項目環(huán)境。如果有同學不知道如何搭建vue項目，可以參考我的另外一篇文章。因為mock數(shù)據(jù)需要借助node.js中express框架，所以必須先在項目中安裝npm install express --save。

搭建完基礎后，我們在src文件下創(chuàng)建一個mock文件，用來存放我們模擬數(shù)據(jù)。因為現(xiàn)在大多后臺返回數(shù)據(jù)類型為json格式，所以我們在mock文件下創(chuàng)建一個user.json文件。

接下來在build文件夾下webpack.dev.conf.js文件中添加以下代碼：

const express = require('express')
const app = express()
const users = require('../src/mock/user.json')
const routes = express.Router()
app.use('/api', routes)

然后在devServer添加：

 before (app) {
   app.get('/api', (req, res) => {
    res.json(users)
   })
  }

完成以上兩步之后，我們就可以在網(wǎng)頁中看到我們mock的api文件了。 在地址欄輸入：http://localhost:8080/api

最后我們只需要發(fā)送Ajax請求來獲取數(shù)據(jù)就可以了

npm install axios -S

在App.vue文件中發(fā)送Ajax請求獲取數(shù)據(jù)

最后重啟項目npm run dev， 可以看到請求的數(shù)據(jù)已經(jīng)顯示在頁面中

關于如何在vue-cli項目中使用mock數(shù)據(jù)就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。