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/ 
版权所有,欢迎转载,转载请注明原文作者及出处。

  • 2
    点赞
  • 18
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
### 回答1: Vue Element UI 后台管理系统首页模板是一个基于Vue.js和Element UI开发的后台管理系统的首页模板。它提供了丰富的UI组件和功能,帮助开发人员快速搭建和定制自己的后台管理系统。 该模板的特点是简洁、美观、易于使用。它采用响应式设计,可以适应不同尺寸的屏幕,包括电脑、平板和手机。页面布局清晰,组件排列合理,用户可以直观地了解系统的各个功能模块和数据统计信息。 该模板提供了丰富的UI组件,包括按钮、表格、表单、对话框、菜单等。这些组件可以轻松地与后端数据进行绑定,实现数据的展示和交互。同时,该模板还提供了许多常用的功能组件,如权限管理、数据可视化、文件上传等,使得开发人员可以更加方便地实现各种需求。 除了UI组件和功能组件,该模板还提供了一套完整的前端架构和开发规范。开发人员可以基于该模板进行次开发,添加自己的业务逻辑和样式,以及进行自定义配置。同时,该模板还提供了详细的文档和示例代码,帮助开发人员快速入门和解决问题。 总的来说,Vue Element UI 后台管理系统首页模板是一个功能强大、易于使用、可定制的模板,适用于各种后台管理系统的快速开发。它能够帮助开发人员节省大量的时间和精力,提高开发效率,同时也提供了良好的用户体验和可维护性。 ### 回答2: VueElement UI是一对非常强大的前端开发工具组合,它们能够帮助我们快速构建出漂亮且功能丰富的后台管理系统。而在后台管理系统中,首页模板扮演着非常重要的角色。下面将用300字详细介绍VueElement UI配合的后台管理系统首页模板的特点。 VueElement UI的结合可以带来很多优势。首先,Vue框架本身具有数据驱动和组件化的特点,开发者可以通过创建组件、构建数据模型和实现数据绑定来快速搭建系统页面。而Element UI作为一个基于VueUI框架,提供了丰富的组件库,包含了按钮、卡片、表格、表单等常用组件,能够帮助我们更快速地构建页面。 在后台管理系统中,首页模板需要具备一些常见的功能和布局,以提供给用户友好的操作界面。通过VueElement UI可以轻松实现以下特点。 首先,首页模板需要包含一个侧边栏和顶部导航栏,侧边栏用于展示系统的菜单导航,而顶部导航栏用于显示用户信息和一些通知。VueElement UI提供了多种布局组件,可以快速实现这种侧边栏和导航栏的布局。 其次,首页模板需要展示一些重要的系统指标和数据统计信息,比如会员数量、订单数量、访问量等等。Vue的数据驱动特性可以很方便地将数据绑定到页面上,通过Element UI提供的卡片、图表等组件,可以直观地展示这些数据。 最后,首页模板还需要提供一些快捷入口和功能区块,比如最新订单、推荐产品、系统公告等。通过VueElement UI提供的组件,可以很容易地创建这些功能区块,并且通过路由导航等功能来实现相关的页面跳转和操作。 综上所述,VueElement UI的后台管理系统首页模板具有快速开发、易于扩展和美观实用等特点。通过组件化的开发方式和丰富的UI组件库,可以帮助我们快速构建出功能强大并且美观的后台管理系统。 ### 回答3: Vue Element UI 是一种基于Vue.js框架和Element UI组件库的后台管理系统首页模板。它提供了一套美观、易用、功能丰富的模板,方便开发者快速构建自己的后台管理系统Vue Element UI 的后台管理系统首页模板具有以下特点: 1. 响应式设计:该模板可以自动适应不同屏幕大小的设备,包括桌面电脑、平板电脑和手机。无论用户使用何种设备访问后台管理系统,都能得到良好的用户体验。 2. 多样化布局:该模板提供了多种布局方案,包括上下布局、左右布局等,适应不同的需求。用户可以根据自己的喜好和业务场景选择合适的布局。 3. 功能丰富:该模板集成了各种常见的后台管理系统功能模块,包括用户管理、角色权限管理、数据分析等,开发者可以基于这些功能模块快速搭建自己的后台系统。 4. 可定制化:该模板提供了丰富的主题和组件样式配置选项,开发者可以根据自己的需求进行定制。同时,该模板使用了Vue.js的组件化开发方式,方便扩展和组合。 5. 国际化支持:该模板提供了多语言支持,可以方便地将后台管理系统适配成不同语言版本,满足不同用户群体的需求。 总之,Vue Element UI 的后台管理系统首页模板是一种功能强大、易用灵活的模板,可以帮助开发者快速构建响应式、美观的后台管理系统。无论是初学者还是有经验的开发者,都可以轻松上手使用。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

朝雨忆轻尘

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值