Vue + Element UI 實現權限管理系統 前端篇（二）：Vue + Element 案例

導入項目

打開 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 標籤下添加配置。

{

　　test: /\.scss$/,

　　loaders: ['style', 'css', 'sass']

}

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/ 版權全部，歡迎轉載，轉載請註明原文做者及出處。