使用Vue+Element-UI从0搭建一个常见的前端模板
首先,创建一个vue项目,这里不做过多阐述,直接写模板
简单的介绍一下一般的页面布局包括顶部导航栏,左侧菜单栏,和主要的信息展示页面
我们直接勾勒出一个这样的架子,这里使用了element-UI,记得用npm下载一下
<div><el-container><el-header>顶层容器</el-header></el-container><el-container><el-aside>左侧菜栏</el-aside><el-main>主要信息展示页面</el-main></el-container></div>
接下来开时进行顶层代码的编写:
<div><el-container><el-header style="background-color: #e5e5e7;display: flex;align-items: center;justify-content: space-between"><div style="font-family: 华文行楷;font-size: 30px;">ikun粉丝团人员管理系统</div><div><el-dropdown @command="handleCmd"><span class="el-dropdown-link" style="display: flex;align-items: center;cursor: pointer"><i><img style="width: 48px;height: 48px;border-radius: 24px;margin-top: 15px;" src="https://wx2.sinaimg.cn/mw2000/50861ae8ly1h71qt55s6kj20u0140n6p.jpg" alt="">头像</i></span><el-dropdown-menu slot="dropdown"><el-dropdown-item command="setting">系统设置</el-dropdown-item><el-dropdown-item command="usercenter">个人中心</el-dropdown-item><el-dropdown-item command="logout" divided>注销登录</el-dropdown-item></el-dropdown-menu></el-dropdown></div></el-header></el-container><el-container><el-aside>左侧菜栏</el-aside><el-main>主要信息展示页面</el-main></el-container></div>
export default{methods:{/*** 这个方法有一个默认的参数,参数值就是每一个菜单项的 command 属性的值* @param cmd*/handleCmd(cmd) {if (cmd == 'logout') {//注销登录this.$confirm('是否注销登录?', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(() => {//执行注销登录,向后台发送注销请求this.getRequest("注销登录接口地址如:/outLogin");//删除sessionStorage 中的数据window.sessionStorage.removeItem("要删除的对象名如: data");//跳转到项目登录页面this.$router.replace("登录界面路由地址如:/");}).catch(() => {this.$message({type: 'info',message: '已取消'});});}}}
}
</script>
露出kun脚了,不写了
使用Vue+Element-UI从0搭建一个常见的前端模板相关推荐
- 前端自动化构建工具:用Gulp4.0搭建一个基本的前端开发环境
一个项目的完成一般需要经过三个步骤:初始化.开发和部署.在前端开发过程中,我们经常需要依靠一些自动化构建工具来优化前端工作流程,来帮助我们完成一系列繁琐的工作,例如浏览器热更新.ES6编译.代码压缩. ...
- 【Vue 快速入门】从零开始搭建 VUE + Element UI后台管理系统框架
[Vue 快速入门]从零开始搭建 VUE + Element UI后台管理系统框架 前言 后台管理系统前端框架,现在很流行的形式都是,上方和左侧都是导航菜单,中间是具体的内容.比如阿里云.七牛云.头条 ...
- vue + element ui 的后台管理系统框架_从零开始搭建 VUE + Element UI后台管理系统框架...
点击右上方红色按钮关注"web秀",让你真正秀起来 前言 后台管理系统前端框架,现在很流行的形式都是,上方和左侧都是导航菜单,中间是具体的内容.比如阿里云.七牛云.头条号.百家号等 ...
- 【Vue+Element UI】关闭指定某一个页面的loading动画
[Vue+Element UI]关闭指定某一个页面的loading动画 模板:vue-admin-template v4.4.0 问题描述:由于vue-admin默认配置了全局loading,所以页面 ...
- 从0搭建一个Springboot+vue前后端分离项目(一)安装工具,创建项目
从0搭建一个Springboot+vue前后端分离项目(二)使用idea进行页面搭建+页面搭建 参考学习vue官网文档 https://v3.cn.vuejs.org/guide/installati ...
- 一个基于.Net Core+Vue+Element Ui开发的OA系统
今天给大家推荐一个开源OA系统. 项目简介 这是一个基于.Net Core构建的简单.跨平台OA系统.企业可以利用它进行信息化建设,框架提供了用户管理.权限管理.表引擎.流程引擎.BI智能报表,可以大 ...
- Vue+Element UI 下,如何给一个表单设置自定义规则或多个验证规则(:rules)
依旧是公司里那个Vue+Element UI的项目.今天遇到了一个新的问题:表单中某个选择器的值不同,控制着下面表单内容是否显示. 大概就是这个样子.由后台返回的"发放方式"的数值 ...
- bind-html自动换行,vue element ui this.$alert 样式修改,长词自动换行、自定义htm
vue element ui this.$alert 样式修改,长词自动换行.自定义htm vue element ui this.$alert 样式修改,长词自动换行.自定义html标签无效果 问题 ...
- Vue + Element UI 实现 登陆注册基本demo实例
Vue + Element UI 实现权限管理系统 前端篇(二):Vue + Element 案例 导入项目 打开 Visual Studio Code,File --> add Folder ...
最新文章
- Webservices
- 【模型调优】风控模型调优相关知识
- C语言rewind()函数(设置文件位置为给定流 stream 的文件的开头)(回到文件开头重读)
- ElasticSearch集成SpringData史上最全查询教程
- Android 进程保活手段分析
- 2015-7-24 从新开始博客之路
- Go语言Web框架gwk介绍 (四)
- pta:6-1单链表逆转(20分)
- 总结leetcode上【排列问题】【组合问题】【子集问题】回溯算法去重的两种写法!
- map slice综合示例 go语言
- python-基础-面向对象2-异常-模块工厂模式
- 京沪广深同日发布网约车新规细则草案 滴滴回应称或将导致车辆供给骤减
- 计算机锁屏如何取消密码,Win10锁屏密码怎么取消?Win10系统取消锁屏密码的方法教程...
- c语言编译器只有9行怎么添加,avr单片机c语言编译器(9页)-原创力文档
- office365在线安装太慢,换离线安装终于搞定
- 图书管理系统 利用文件txt进行读写操作 文件操作
- 安装WGM需要java嘛,jdk7+apache-tomcat-7安装
- 打印机文件里没有服务器属性,win7没有打印机服务器属性设置
- 【ECharts系列|03可视化大屏】大数据管理平台实时展示
- HTTP Headers 入门