安裝 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(二)