安裝 Element、SCSS和axios（二）
1、安裝element-ui依賴。
npm i element-ui -S
2、項目導入
按照安裝指南，在 main.js 中引入 element，引入之後，main.js 內容如下：
項目引入之後，我們在原有的 HelloWorld.vue 頁面中加入一個 element 的按鈕，測試一下。
頁面路由
添加頁面
我們把 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。
npm install sass-loader node-sass --save-dev
2.添加配置
在build文件夾下的webpack.base.conf.js的 rules 標簽下添加配置。
{ test: /\.scss$/, loaders: [‘style‘, ‘css‘, ‘sass‘] }
3.如何使用
在頁面代碼 style 標簽中把 lang 設置成 scss 即可。
<style lang="scss"> </style>
4.使用測試
豐富一下 404 頁面內容，加入 scss 樣式，移除 App.vue 的 logo 圖片。
<template>
<div class="site-wrapper site-page--not-found">
<div class="site-content__wrapper">
<div class="site-content">
<h2 class="not-found-title">404</h2>
<p class="not-found-desc">抱歉！您訪問的頁面<em>失聯</em>啦 ...</p>
<el-button @click="$router.go(-1)">返回上一頁</el-button>
<el-button type="primary" class="not-found-btn-gohome" @click="$router.push({ name: ‘home‘ })">進入首頁</el-button>
</div>
</div>
</div>
</template>
<script>
export default {
name: ‘404‘
}
</script>
<style lang="scss">
.site-wrapper.site-page--not-found {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
.site-content__wrapper {
padding: 0;
margin: 0;
background-color: #fff;
}
.site-content {
position: fixed;
top: 15%;
left: 50%;
z-index: 2;
padding: 30px;
text-align: center;
transform: translate(-50%, 0);
}
.not-found-title {
margin: 20px 0 15px;
font-size: 8em;
font-weight: 500;
color: rgb(55, 71, 79);
}
.not-found-desc {
margin: 0 0 30px;
font-size: 26px;
text-transform: uppercase;
color: rgb(118, 131, 143);
> em {
font-style: normal;
color: #ee8145;
}
}
.not-found-btn-gohome {
margin-left: 30px;
}
}
</style>
View Code
安裝 axios
axios 是一個基於 Promise 用於瀏覽器和 nodejs 的 HTTP 客戶端，我們後續需要用來發送 http 請求。
安裝依賴
執行以下命令，安裝 axios 依賴。
npm install --save-dev axios
安裝完成後，修改 Home.vue 進行簡單的安裝測試。
<template>
<div class="page">
<h2>Home Page</h2>
<el-button type="primary" @click="testAxios()">測試axios調用</el-button>
</div>
</template>
<script>
import axios from ‘axios‘
export default {
name: ‘Home‘,
methods:{
testAxios(){
axios.get(‘http://localhost:8080‘)
.then(function(res){
alert(res.data);
}).catch(function(res){
alert(res);
})
}
}
}
</script>
View Code
點擊測試按鈕觸發 http 請求，並彈出窗顯示返回數據。
安裝 Mock.js
為了模擬後臺接口提供頁面需要的數據，我們引入 Mock.js 為我們提供模擬數據，而不用依賴於後臺接口的完成。
安裝依賴
執行如下命令，安裝依賴包。
npm install mockjs --save-dev
安裝完成之後，我們寫個例子測試一下。
在 src 目錄下新建一個 mock 目錄，創建 mock.js，在裏面我們模擬了兩個接口，分別攔截用戶和菜單的請求，並返回相應的數據。
如下圖所示：
mock.js代碼：
import Mock from ‘mockjs‘; // es6語法引入mock模塊 Mock.mock(‘http://localhost:8080/user‘, { ‘name‘: ‘@name‘, // 隨機生成姓名 ‘email‘: ‘@email‘, // 隨機生成姓名 ‘age|1-10‘: 5 // 其他數據 }); Mock.mock(‘http://localhost:8080/menu‘, { ‘id‘: ‘@increment‘, // 隨機生成姓名 ‘name‘:‘menu‘, ‘order|10-20‘: 12 // 其他數據 });View Code
修改 Home.vue，在頁面放置兩個按鈕，分別觸發用戶和菜單的處理請求，成功後彈出獲取結果。
Home.vue代碼：
<template>
<div class="page">
<h2>Home Page</h2>
<el-button type="primary" @click="getUser()">獲取用戶信息</el-button>
<el-button type="primary" @click="getMenu()">獲取菜單信息</el-button>
</div>
</template>
<script>
import axios from ‘axios‘
import mock from ‘@/mock/mock.js‘;
export default {
name: ‘Home‘,
methods:{
getUser() {
axios.get(‘http://localhost:8080/user‘)
.then(function(res) {
alert(JSON.stringify(res.data));
}).catch(function(res) {
alert(res);
});
},
getMenu() {
axios.get(‘http://localhost:8080/menu‘)
.then(function(res) {
alert(JSON.stringify(res.data));
}).catch(function(res) {
alert(res);
});
}
}
}
</script>
View Code
瀏覽器訪問：http://localhost:8080/#/，分別點擊兩個按鈕，mock 會根據請求 url 攔截對應請求並返回模擬數據。
獲取用戶信息
獲取菜單信息
OK，mock 已經成功集成進來了。
原文出處：https://www.cnblogs.com/xifengxiaoma/
自己整理記錄。
安裝 Element、SCSS和axios（二）