導入項目
打開 Visual Studio Code，File --> add Folder to Workspace，導入我們的項目。
安裝 Element
安裝依賴
Element 是國內餓了么公司提供的一套開源前端框架，簡潔優雅，提供了 vue、react、angular 等多個版本，我們這里使用 vue 版本來搭建我們的界面。
訪問：http://element-cn.eleme.io/#/zh-CN/component/installation ，官方指南，包含框架的安裝，組件的使用等的全方位的教程。
按照安裝指南，我們選擇 npm 的安裝方式。我們使用 Yarn ，可以用 yarn add element-ui 命令替代。
項目導入
按照安裝指南，在 main.js 中引入 element，引入之后，main.js 內容如下：
項目引入之后，我們在原有的 HelloWorld.vue 頁面中加入一個 element 的按鈕，測試一下。
Element 官網組件教程案例中，包含大量組件使用場景，直接復制組件代碼到項目頁面即可。
HelloWorld.vue 頁面加入一個測試按鈕
如下圖所示，說明組件已經成功引入了。
頁面路由
添加頁面
我們把 components 改名為 views，並在 views 目錄下添加三個頁面，Login.vue，Home.vue，404.vue。
三個頁面內容簡單相似，只有簡單的頁面標識，如登錄頁面是 “Login Page”。
Login.vue，其他頁面類似。
<template>
<div class="page">
<h2>Login Page</h2>
</div>
</template>
<script>
export default { name: 'Login' } </script>
配置路由
打開 router/index.js，添加三個路由，分別對應主頁、登錄和404頁面。
import Vue from 'vue'
import Router from 'vue-router' import Login from '@/views/Login' import Home from '@/views/Home' import NotFound from '@/views/404' Vue.use(Router) export default new Router({ routes: [ { path: '/', name: 'Home', component: Home }, { path: '/login', name: 'Login', component: Login } ,{ path: '/404', name: 'notFound', component: NotFound } ] })
瀏覽器重新訪問下面不同路徑，路由器會根據路徑路由到相應的頁面。
http://localhost:8080/#/，/ 路由到 Home Page。
http://localhost:8080/#/login，/login 路由到 Login Page。
http://localhost:8080/#/404，/404 路由到 404 Error Page。
安裝 SCSS
1.安裝依賴
因為后續會用到 SCSS 編寫頁面樣式，所以先安裝好 SCSS。
yarn add sass-loader node-sass --dev
2.添加配置
在build文件夾下的webpack.base.conf.js的 rules 標簽下添加配置。
3.如何使用
在頁面代碼 style 標簽中把 lang 設置成 scss 即可。
<style lang="scss"> </style>
4.使用測試
豐富一下 404 頁面內容，加入 scss 樣式，移除 App.vue 的 logo 圖片。
訪問：http://localhost:8080/#/404， 正確顯示修改后的 404 頁面效果。
安裝 axios
axios 是一個基於 Promise 用於瀏覽器和 nodejs 的 HTTP 客戶端，我們后續需要用來發送 http 請求。
安裝依賴
執行以下命令，安裝 axios 依賴。
yarn add axios
安裝完成后，修改 Home.vue 進行簡單的安裝測試。
點擊測試按鈕觸發 http 請求，並彈出窗顯示返回數據。
安裝 Mock.js
為了模擬后台接口提供頁面需要的數據，我們引入 Mock.js 為我們提供模擬數據，而不用依賴於后台接口的完成。
安裝依賴
執行如下命令，安裝依賴包。
yarn add mockjs --dev
安裝完成之后，我們寫個例子測試一下。
在 src 目錄下新建一個 mock 目錄，創建 mock.js，在里面我們模擬了兩個接口，分別攔截用戶和菜單的請求，並返回相應的數據。
如下圖所示：
修改 Home.vue，在頁面放置兩個按鈕，分別觸發用戶和菜單的處理請求，成功后彈出獲取結果。
瀏覽器訪問：http://localhost:8080/#/，分別點擊兩個按鈕，mock 會根據請求 url 攔截對應請求並返回模擬數據。
獲取用戶信息
獲取菜單信息
OK，mock 已經成功集成進來了。
源碼下載
后端：https://gitee.com/liuge1988/kitty
前端：https://gitee.com/liuge1988/kitty-ui.git
作者：朝雨憶輕塵
出處：https://www.cnblogs.com/xifengxiaoma/
版權所有，歡迎轉載，轉載請注明原文作者及出處。