Vue + Element-UI —— 项目实战(一)
Vue + ElementUI 后台管理项目实战
内容 | 参考链接 |
---|---|
一 | Vue + Element-UI —— 项目实战(零)(项目概述【附源码】) |
二 | Vue + Element-UI —— 项目实战(一) |
三 | Vue + Element-UI —— 项目实战(二) |
四 | Vue + Element-UI —— 项目实战(三) |
五 | Vue + Element-UI —— 项目实战(四) |
六 | Vue + Element-UI —— 项目实战(五) |
七 | Vue + Element-UI —— 项目实战(六) |
八 | Vue + Element-UI —— 项目实战(七) |
九 | Vue + Element-UI —— 项目实战(八)(完结) |
文章目录
- 项目演示
- 一、项目实战一
- Ⅰ、配置相关插件
- 1. 配置使用 Element
- 2. 配置使用路由
- Ⅱ、搭建首页(头部 && 侧边栏)
- 1. 头部 header 搭建
- 2. 左侧 aside 菜单栏搭建
- 3. 一级菜单实现
- 4. 二级菜单实现
- 5. menu 样式和路由跳转
项目演示
项目教学视频链接
vue + element-ui 项目演示
一、项目实战一
Ⅰ、配置相关插件
1. 配置使用 Element
Element参考文档
- 安装 Element:在项目路径下终端键入以下命令:
npm i element-ui -S
- (全局引入)引入并使用 Element:在
main.js
中通过 import 导入,通过 Vue.use(xxx) 全局使用。
import ElementUI from 'element-ui';import 'element-ui/lib/theme-chalk/index.css';Vue.use(ElementUI)
- (按需引入)引入并使用 Element:在
main.js
中通过 import 导入指定
组件,通过 Vue.use(xxx) 使用该组件。
import {Button} from 'element-ui';import 'element-ui/lib/theme-chalk/index.css';Vue.use(Button)
- 安装 babel-plugin-component 插件,已达到减小项目体积的目的。
npm install babel-plugin-component -D
- 如果使用了按需引入,则需要在
babel.config.js
中添加以下代码
- 通过终端键入
npm run build
,可以发现全局引入和按需引入,生成的打包文件 dist 的大小差距很大。使用按需引入
,会减少
项目的体积。
2. 配置使用路由
- 安装路由插件,终端键入如下代码。【注意 vue.js 对应 vue-router 的 3版本,要 vue-router@3,安装指定版本,否则会安装最新版本,导致错误】
npm i vue-router@3
- 创建 router 文件夹,并在该文件夹创建 index.js 文件进行路由相关配置
import Vue from "vue";import VueRouter from "vue-router";import Home from '../views/Home.vue'import User from '../views/User.vue'//全局引入VueRouterVue.use(VueRouter);const routes = [{path: "/",name: "Home",component: Home, },{path: '/user',name: 'User',component: User}];// router用于接收VueRouter实例const router = new VueRouter({mode: "history",routes,});//默认暴露export default router;
- 创建 views 文件夹,在该文件夹下,创建 home 和 User 文件夹,在这两个文件夹下分别创建 index.vue
- 在 main.js 导入并使用路由
import Vue from "vue";import App from "./App.vue";import router from '../router'new Vue({render: h => h(App),router}).$mount('#app')
- 在 App 组件相应位置显示内容
<template><div id="app"><router-view></router-view></div></template>
Ⅱ、搭建首页(头部 && 侧边栏)
1. 头部 header 搭建
- 安装 less 插件(本项目的样式为 less)
npm i less
- 安装插件 less 的解析器
npm i less-loader@6.0.0
- 对 Main.vue 写入布局(el-xxx 是 Elementui 的书写格式)
<el-container style="hight: 100%"><el-aside width="auto">Aside</el-aside><el-container><el-header>Header</el-header><el-main>Main</el-main></el-container></el-container>
- 对 Main.vue 的 header 设置样式
<style lang="less" scoped>.el-header{background-color: #333;}.el-main{padding: 0;}</style>
- 记得在 main.js 中按需引入
import {Button, Radio, Container, Main, Header, Aside} from 'element-ui';Vue.use(Button)Vue.use(Radio)Vue.use(Container)Vue.use(Main)Vue.use(Header)Vue.use(Aside)
2. 左侧 aside 菜单栏搭建
- component(里面是公共文件) 文件夹下创建 CommonAside.vue,写入布局及样式。
<template><el-menudefault-active="1-4-1"class="el-menu-vertical-demo"@open="handleOpen"@close="handleClose":collapse="isCollapse"><el-submenu index="1"><template slot="title"><i class="el-icon-location"></i><span slot="title">导航一</span></template><el-menu-item-group><span slot="title">分组一</span><el-menu-item index="1-1">选项1</el-menu-item><el-menu-item index="1-2">选项2</el-menu-item></el-menu-item-group><el-menu-item-group title="分组2"><el-menu-item index="1-3">选项3</el-menu-item></el-menu-item-group><el-submenu index="1-4"><span slot="title">选项4</span><el-menu-item index="1-4-1">选项1</el-menu-item></el-submenu></el-submenu><el-menu-item index="2"><i class="el-icon-menu"></i><span slot="title">导航二</span></el-menu-item><el-menu-item index="3" disabled><i class="el-icon-document"></i><span slot="title">导航三</span></el-menu-item><el-menu-item index="4"><i class="el-icon-setting"></i><span slot="title">导航四</span></el-menu-item></el-menu></template><script>export default {data() {return {isCollapse: true};},methods: {handleOpen(key, keyPath) {console.log(key, keyPath);},handleClose(key, keyPath) {console.log(key, keyPath);}}}</script><style lang="less" scoped>.el-menu-vertical-demo:not(.el-menu--collapse) {width: 200px;min-height: 400px;}</style>
- 记得在 main.js 中按需引入
3. 一级菜单实现
【添加数据】
- 在 CommonAside.vue 的 data 中添加数据(用来做动态组件)
menu: [{path: "/",name: "home",label: "首页",icon: "s-home",url: "Home/Home",},{path: "/mall",name: "mall",label: "商品管理",icon: "video-play",url: "MallManage/MallManage",},{path: "/user",name: "user",label: "用户管理",icon: "user",url: "UserManage/UserManage",},{label: "其他",icon: "location",children: [{path: "/page1",name: "page1",label: "页面1",icon: "setting",url: "Other/PageOne",},{path: "/page2",name: "page2",label: "页面2",icon: "setting",url: "Other/PageTwo",},],},]
【渲染组件(分为一级菜单和二级菜单)】
- 在计算属性 computed 中定义函数
noChildren()
,过滤出没有子级的一级菜单
noChildren() {//过滤出来没有子项目的数据return this.menu.filter((item) => !item.children);}
- v-for 遍历过滤出来的一级菜单,并在相应位置做出呈现
<el-menu-item v-for="item in noChildren" :index="item.path" :key="item.path"><i :class="'el-icon-' + item.icon"></i><span slot="title">{{item.label}}</span></el-menu-item>
4. 二级菜单实现
- 在计算属性 computed 中定义函数
hasChildren()
,过滤出有子级的菜单
hasChildren() {//过滤出来有子项目的数据return this.menu.filter((item) => item.children);}
- v-for 遍历过滤出来的二级菜单,并在相应位置做出呈现
<el-submenu v-for="item in hasChildren" :index="item.path" :key="item.path"><template slot="title"><i :class="'el-icon-' + item.icon"></i><span slot="title">{{item.label}}</span></template><!-- 二级菜单 --><el-menu-item-group v-for="(subItem, subIndex) in item.children" :index="subIndex" :key="subItem.path"><el-menu-item >{{subItem.label}}</el-menu-item></el-menu-item-group></el-submenu>
5. menu 样式和路由跳转
- CommonAside.vue 中设置样式:对侧边栏进行样式设置
background-color="#545c64"text-color="#fff"active-text-color="#ffd04b".......el-menu {height: 100vh;border: #fff;h3 {color: white;text-align: center;line-height: 48px;}}
- 路由配置:添加点击事件,进行路由的跳转
<el-menu-item @click='clickMenu(item)'></el-menu-item>.......clickMenu(item) {this.$router.push({name: item.name})}
不积跬步无以至千里 不积小流无以成江海
点个关注不迷路(持续更新中…)
Vue + Element-UI —— 项目实战(一)相关推荐
- 实验管理系统springboot+vue+element ui项目开发
实验管理系统 某学院实验老师长期采用人工的形式完成药品试剂的入库.查询.出库的流程.但这种方式存在诸多问题和不便: 1. 在仓库运行流程中效率不高,容易出错. 2. 管理人员不能方便的了解每种物品的状 ...
- 在Vue+Element ui 项目中如何使用iconfont(阿里图标库)中的图标
在项目过程中,element ui 中自带的图标往往满足不了自己的需求,那么如何在项目中使用iconfont的图标呢? 在iconfont中新建一个项目 找到自己想要的图标,加入购物车,加入完成后点击 ...
- vue + element UI【实战】打字闯关(含按键监听、按键音效、字符匹配、动态样式、结果判定、数据统计、音效获取和剪辑等实用技巧)
效果预览 点我在线预览 实现思路 将目标字符串按字符转换为数组,遍历展示 this.stringLib[this.step].split("").forEach((item) =& ...
- vue+element ui 项目 后台管理系统
前端界面 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF ...
- vue + element UI【实战】音乐播放器/语音条(内含音频的加载、控制,事件监听,信息获取,手机网页阴影的去除等技巧)
相关技巧,详见注释 <template><!-- 音乐播放器 --><div class="container"><h2>{{ mu ...
- 【前端】Vue+Element UI案例:通用后台管理系统-用户管理:Table表格增删查改、Pagination分页、搜索框
文章目录 目标 代码 0.结构 1.按钮-删除 2.按钮-编辑 3.debug 4.样式 5.分页Pagination:功能 6.分页Pagination:样式 7.搜索框:功能 8.搜索框:样式 总 ...
- 【前端】Vue+Element UI案例:通用后台管理系统-用户管理:Form表单填写、Dialog对话框弹出
文章目录 目标 代码 0.页面结构 1.新增按钮和弹出表单:结构 2.新增按钮和弹出表单:点击新增弹出表单 3.表单样式 4.表单验证 5.表单的提交和取消功能:接口.mock相关准备 6.表单的提交 ...
- 【前端】Vue+Element UI案例:通用后台管理系统-登陆不同用户显示不同菜单、动态添加路由
文章目录 目标 代码 0.动态地显示菜单:store 1.动态注册路由 2.解决刷新后摆平问题 总代码 本篇修改的代码文件 tab.js 参考视频: VUE项目,VUE项目实战,vue后台管理系统,前 ...
- 【前端】Vue+Element UI案例:通用后台管理系统-代码总结(已开源)
文章目录 前言 项目文件目录 api mockServe home.js permission.js index.js mock.js user.js assert components Common ...
- vue + element ui 的后台管理系统框架_从零开始搭建 VUE + Element UI后台管理系统框架...
点击右上方红色按钮关注"web秀",让你真正秀起来 前言 后台管理系统前端框架,现在很流行的形式都是,上方和左侧都是导航菜单,中间是具体的内容.比如阿里云.七牛云.头条号.百家号等 ...
最新文章
- android 音频增益_参考级音频播放器!七彩虹发布Pocket HIFI U6:4999亲民价
- 在ubuntu10.04上安装永中office2010
- Python 基础常用数据结构
- ComponentOne Ultimate 2020中文版
- 通达oa与mysql集成_安装通达OA后想使用其自带的Mysql数据库的解决方法
- Oracle原理:11g中的网络配置
- HTTP事务的延迟—TCP的影响
- [ActionScript 3.0] AS3.0 下雨及涟漪效果
- 求一个连通图的割点(去掉一个点后图不再连通)
- Python爬虫入门_之urllib2urllib
- 【SpringCloud】服务降级 Hystrix DashBoard
- 研究生学位论文撰写注意事项--清华大学学位论文
- mysql与nagios的结合使用
- 「代码随想录」474.一和零【动态规划】力扣详解!
- Ubuntu 搭建简单的git server
- [软件更新]CuteFTP 8.3.3.0054
- 【笔记】【机器学习基础】非负矩阵分解
- java17的下载与安装
- android 嵌套分组拖动_Android ExpandableListView双层嵌套实现三级树形菜单
- CentOS和WIN7双系统时间错误
热门文章
- Java实现手机号邮箱号登录_手机号、邮箱或者用户名登录的实现方法
- Spring Boot 对接微信V3支付(附源码)
- 微博先锋:Twitter系统结构分析
- 深度解析|积分墙防作弊,一直在发展
- 《即兴演讲》学习总结
- 杭州师范大学计算机科学与技术怎么样,杭州师范大学怎么样 王牌专业有哪些...
- 10款最佳项目管理工具推荐
- html如何退出登录,微信小程序怎么退出登录
- 黑月教主去水印软件_去除图片/视频去水印!这个软件可以帮助你!
- 佳能打印机扫描文件到电脑显示设置计算机,电脑教程:佳能打印机怎么扫描文件到电脑...