1、在某一指定目錄下，按下shift+滑鼠右鍵，，點選“在此處開啟Powershell視窗(S)”，啟動命令列視窗。如下圖：

2、在視窗中輸入以下命令以便建立專案：vue create mockjsdemo

3、專案的建立步驟和配置選擇與一般的建立Vue專案一樣，不再廢話。不太熟悉的朋友可參考：vue-cli@4搭建 vue + element-ui 專案實操。建立完畢後，專案目錄結構如下圖：

 

4、用Visual Studio Code開啟mockjsdemo資料夾。

5、在VS Code中，按下ctrl+shift+`快捷鍵，開啟的終端，依次輸入以下三個命令，分別用於安裝element-ui、axios 、mockjs 等三個依賴庫：

　　npm install element-ui -S
　　npm install axios -S
　　npm install mockjs -S

6、在main.js檔案中，編寫以下程式碼：

//匯入elementUI庫
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
//使用elementUI
Vue.use(ElementUI)

7、在HomeView.vue檔案中，首先將預設建立的有關HelloWorld元件的匯入、註冊和使用都註釋或刪除掉。然後編寫以下程式碼：

<template>   <div class="home">     <!-- <img alt="Vue logo" src="../assets/logo.png">     <HelloWorld msg="Welcome to Your Vue.js App"/> -->         <el-button type="primary" @click="getuser()">獲取使用者資訊</el-button>     <el-button type="primary" @click="getMenu()">獲取選單資訊</el-button>   </div> </template>
<script> // import HelloWorld from '@components/HelloWorld.vue' import axios from 'axios' // import mock from '@mock/mock.js' import '../mock/mock.js'
export default {   name: 'HomeView',   components: {     // HelloWorld   },   methods:{     getuser(){       axios.get('http://localhost:8080/user').then(res => {alert( JSON.stringify(res.data) )} )     },     getMenu(){       axios.get('http://localhost:8080/menu').then(res => {alert( JSON.stringify(res.data) )} )     },   } } </script>

8、在src目錄下面建立mock資料夾，在其中建立mock.js檔案，用以模擬伺服器端產生的模擬資料：

import Mock from 'mockjs'

Mock.mock('http://localhost:8080/user', {
    'name': '@name', // 隨機生成姓名
    'email': '@email', // 隨機生成郵箱
    'age|1-10': 5 // 年齡1-10之間
});
Mock.mock('http://localhost:8080/menu', {
    'id': '@increment', // id自增
    'name': 'menu', // 名稱為menu
    'order|1-20': 6 // 排序1-20之間
})

9、在終端輸入npm run serve命令，以執行本專案。單擊“獲取使用者資訊”，以便獲得響應，結果如下圖。

示例原始碼百度網盤下載地址：mockjsdemo ，提取碼：iwcx

注意：原始碼下載後需要使用npm install命令安裝所有的依賴包。所有的依賴包及其版本都在package.json檔案中寫著，包括element-ui、axios 、mockjs等三個依賴包。安裝之後再執行專案即可。