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

總結

以上是生活随笔為你收集整理的Vue + Element UI 实现 登陆注册基本demo实例的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。