Vue使用elementUI实现一个后台管理

功能效果
思路
功能分析
- 1.安装
- 2.main.vue
- 3.App.vue
- 4.views
- - (1) Home.vue
  - (2) Classify.vue
- 5 router路由

功能效果

初始界面
添加商品分类
修改分类
删除分类

思路

使用element UI中提供的布局容器，然后在容器内布局自己的页面，home.vue是主页面，上面是系统的头部，左侧是导航，右侧是主体部分，通过点击左侧的导航（classify，goods），右侧的主体部分（main）显示不同的内容。路由配置的时候，要把home配置在根路由下，，然后把classify和goods配置在home的子路由下。一定要注意要在main里面写占位符，这样，点击左侧的导航，内容才会在main里面显示出来。

功能分析

1.安装

（1）首先创建一个vue项目，创建过程我之前的博客有写过。该后台是基于element UI组件库。
（2）安装element ui

 npm -i element-ui -S

（3）全局引入，参考element-UI官网

引入下面的代码到mian.js

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';Vue.use(ElementUI);

2.main.vue

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';Vue.use(ElementUI);
Vue.config.productionTip = falsenew Vue({router,store,render: h => h(App)
}).$mount('#app')

3.App.vue

删除自动生成的多余代码，剩下下面的部分就可以

<template>//占位符，渲染页面<router-view></router-view>
</template><style>
body,html{height: 100%;margin: 0;padding: 0;}
</style>

4.views

(1) Home.vue

<template><div id="app"><el-container class="my_container"><el-header class="my_header"><div class="my_sysName">JDAPP后台管理<i :class="isopen" @click="isOpen"></i></div> <div class="my_header_right"><span>当前用户：</span><span>退出登录</span> </div></el-header><el-container><el-aside class="my_aside" :width="`${asideWidth}px`"><el-menu:collapse-transition='false':collapse="iscollapse":default-active="defaultActive"class="el-menu-vertical-demo"@open="handleOpen"@close="handleClose"background-color="#545c64"text-color="#fff"active-text-color="#ffd04b"routerstyle="border :0"><el-menu-item index="/goods"><i class="el-icon-setting"></i><span slot="title">商品管理</span></el-menu-item><el-menu-item index="/classify"><i class="el-icon-menu"></i><span slot="title">分类管理</span></el-menu-item></el-menu></el-aside><el-main class="my_main"><router-view></router-view></el-main></el-container> </el-container></div>
</template><script>export default {data(){return{iscollapse : true,   //是否折叠导航isopen : 'el-icon-s-unfold', //控制展开折叠的图标asideWidth : 64  , //默认折叠时的导航栏的宽度defaultActive : window.location.pathname  //当前默认选中的导航}},methods:{handleOpen(key, keyPath) {console.log(key, keyPath);},handleClose(key, keyPath) {console.log(key, keyPath);},//控制展开折叠的图标的点击事件isOpen(){//点击，展开导航，再次点击，折叠导航this.iscollapse = !this.iscollapse;//当导航折叠时，导航栏的宽度为64px，展开时，宽度为200pxthis.asideWidth = this.iscollapse ? 64 : 200;//当导航展开和折叠时的图标this.isopen = this.iscollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'}}
}
</script><style scoped>#app{height: 100%;}.my_container{height: 100%;}.my_header{background:#303133;color:#fff;display: flex;justify-content: space-between;align-items: center;}.my_sysName{font-size: 20px;font-weight: 500;}.my_header_right{display: flex;align-items: center;justify-content: space-around;width: 200px;}.my_aside{background: #545c64;transition: width .3s;}.my_main{background: #E4E7ED;}
</style>

(2) Classify.vue

<template><div><el-button  type="primary" class="el-icon-plus" @click="addClassify">添加分类</el-button><el-table:data="tableData"borderstyle="width: 100%"><el-table-columnprop="name"label="商品名称"></el-table-column><el-table-columnprop="date"label="创建时间"></el-table-column><el-table-columnfixed="right"label="操作"><template slot-scope="scope"><el-button type="danger" @click="handleClick(scope.row)" icon="el-icon-edit">修改</el-button><el-button type="primary" icon="el-icon-delete" @click="deleteClick(scope)">删除</el-button></template></el-table-column></el-table></div>
</template><script>
export default {data(){return{tableData : []}},methods:{// 添加商品分类addClassify(){this.open();},open() {this.$prompt('请输入分类名称', '添加分类', {confirmButtonText: '确定',cancelButtonText: '取消',}).then(({ value }) => {let d = new Date();this.tableData.push({name : value,date : `${d.getFullYear()}-${d.getMonth()+1}-${d.getDate()} ${d.getHours()}:${d.getMinutes()}:${d.getSeconds()}`}),this.$message({type: 'success',message: '分类名称 ' + value + ' 添加成功！'});}).catch(() => {this.$message({type: 'info',message: '取消添加'});       });},// 修改分类名称handleClick(scoped){this.$prompt('是否要修改 ' +  scoped.name +' 分类名称', '修改分类名称', {confirmButtonText: '确定',cancelButtonText: '取消',inputValue : scoped.name}).then(({ value }) => {// console.log(scoped);let d = new Date();scoped.name = value;scoped.date = `${d.getFullYear()}-${d.getMonth()+1}-${d.getDate()} ${d.getHours()}:${d.getMinutes()}:${d.getSeconds()}`;this.$message({type: 'success',message: '分类名称 ' + value + ' 修改成功！'});}).catch(() => {this.$message({type: 'info',message: '取消修改'});       });},// 删除分类名称deleteClick(scoped){// console.log(scoped);this.$confirm('此操作将永久删除该文件, 是否继续?', '删除分类', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(({ value }) => {this.tableData.splice(scoped.$index,1);this.$message({type: 'success',message: '分类名称 ' + scoped.row.name + ' 删除成功！'});}).catch(() => {this.$message({type: 'info',message: '取消删除'});       }); }}
}
</script><style></style>

5 router路由

/index.js
路由配置，注意，calssify和Goods是在Home的子路由下。

import Vue from 'vue'
import VueRouter from 'vue-router'Vue.use(VueRouter)const routes = [{path: '/',name: 'Home',component: () => import('@/views/Home.vue'),children : [{path: '/classify',name: 'Classify',component: () => import('@/views/Classify.vue'),},{path: '/goods',name: 'Goods',component: () => import('@/views/Goods.vue'),}]},
]const router = new VueRouter({mode: 'history',base: process.env.BASE_URL,routes
})export default router

Vue使用elementUI实现一个后台管理相关推荐

vuejs 和 element 搭建的一个后台管理界面【收藏】
介绍: 这是一个用vuejs2.0和element搭建的后台管理界面. 相关技术: vuejs2.0:渐进式JavaScript框架,易用.灵活.高效,似乎任何规模的应用都适用. element:基于 ...
vuejs 和 element 搭建的一个后台管理界面
介绍: 这是一个用vuejs2.0和element搭建的后台管理界面. 相关技术: vuejs2.0:渐进式JavaScript框架,易用.灵活.高效,似乎任何规模的应用都适用. element:基于 ...
用vue(element ui)快速开发后台管理
平时我们在用vue开发网站后台管理的时候.比如说要写管理文章的功能,要先去写列表页面,编辑页面,添加页面.另外还需要程序提供对应的增删改查接口图片上传接口等等,那么有没有一种快速的方法.可以用程序来 ...
vue使用element-ui开发的后台管理系统使用中英文切换多语言国际化方案步骤流程
公司后台管理系统需要使用多语言版本,本次记录使用i18n实现多语言切换的流程步骤: 1.安装工具包 npm install vue-i18n 2.在项目src目录下新建lang文件夹,目录结构如下: ...
css-演练-完成一个后台管理页面-不完整版
观注别人的后台对后台进行区块划分目标,完成后台管理的布局完成大体框架的布局 <!doctype html> <html lang="en"> < ...
【vue】介绍一个vuejs 和 element 搭建的一个后台管理界面
2019独角兽企业重金招聘Python工程师标准>>> 这是一个vue.js+element.ui搭建的后台模板,使用起来方便快捷 http://www.cnblogs.com/ta ...
利用vue编写一个后台管理页面
目录前期的准备: 项目的目录结构: 代码编辑: 1.登录界面(Login.vue文件)登录与注册切换的功能 2.注册界面(zhuce.vue文件) 3.首页(利用组件的方法完成) 兄弟们多话不说直接 ...
Vue+ElementUI搭建一个后台管理框架
参考 :https://www.cnblogs.com/taotaozhuanyong/p/11903750.html https://gitee.com/qianhongtang-share/vue ...
vue与elementUI电商后台管理系统笔记05
实现首页的路由重定向实现进入home页面在main那里路由跳转到welcome页面,也就是welcome页面嵌套在home页面里面 welcome是以子路由形式存在于home页面中首先在compo ...

Vue使用elementUI实现一个后台管理

Vue使用elementUI实现一个后台管理

功能效果

思路

功能分析

1.安装

2.main.vue

3.App.vue

4.views

(1) Home.vue

(2) Classify.vue

5 router路由

Vue使用elementUI实现一个后台管理相关推荐

最新文章

热门文章