搭建Vue后台管理项目

从0开始快速搭建一个后台管理系统，搭建好之后就是下面这种形式

安装node环境：下载地址：Node.js

安装脚手架：npm install -g @vue/cli

创建vue项目：vue create +项目名

进入项目：cd+项目名

安装vue-router：npm install vue-router --save

安装路由出现报错指定一个路由的版本去安装： npm install vue-router@3.5.3 --save

在main.js文件中配置路由：

import Vue from 'vue'
import App from './App.vue'
import router from './router'
Vue.config.productionTip = false
Vue.use(router)
new Vue({el: '#app',render: h => h(App),router,
}).$mount('#app')

app.vue里引入router-view进行路由管理

<template><div id="app"><router-view /></div>
</template>
<script>
export default {name: 'App',
}
</script>
<style>
</style>

新建的vue页面

在src文件夹下面建一个router文件夹，在router文件夹下面建一个index.js文件引入路由内容如下：

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
import Layout from '../components/layout'
export default new Router({routes: [{path: "/",name: "login",component: () =>import('../common/login.vue'),meta: {title: "登录",}},{path: '/vueLayout',name: 'vueLayout',redirect: '/home',component: Layout,children: [{path: "/home",name: "home",component: () =>import('../pages/home/index.vue'),meta: {title: "首页",}},{path: "/SecKill/SecKill",name: "SecKill",component: () =>import('../pages/SecKill/index.vue'),meta: {title: "页面一/2"},},{path: "/SecKill/DingDan",name: "DingDan",component: () =>import('../pages/SecKill/dingdan.vue'),meta: {title: "页面一/1"},},{path: "/Ranking",name: "Ranking",component: () =>import('../pages/ranking/index.vue'),meta: {title: "页面一"},},]},]
})
const VueRouterPush = Router.prototype.push
Router.prototype.push = function push(to) {return VueRouterPush.call(this, to).catch(err => err)
}

安装element：推荐使用 npm 的方式安装 npm i element-ui -S

全局引入element：在 main.js 中写入以下内容

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';Vue.use(ElementUI);new Vue({el: '#app',render: h => h(App)
});

在src下面新建一个components文件夹，components文件夹下新建一个layout文件夹里面放一个index.vue文件，在这个文件里引入element的布局容器进行调整

layout文件夹下面的index.vue文件代码如下

<template><div><el-container style="height: 100vh"><el-aside :width="isCollapse ?'64px':'250px'"><el-menu :collapse="isCollapse" :collapse-transition="false" background-color="#000f16" unique-opened style="min-height: 100vh;" router :default-active="$router.currentRoute.path" @select="changeSidebar" text-color="#fff" active-text-color="#fff"><div class="menuLeft"><div class="menu-nav-header"><el-image style="width: 22px; height: 22px; border-radius: 2px" :src="logo"></el-image><span style="margin-left: 10px">管理控制台</span></div></div><template v-for="item in menuslist"><template v-if="item.childMenus && item.childMenus.length > 0"><el-submenu :index="item.url + ''" :key="item.url"><template slot="title"><div><div class="icon-box"><i :class="item.icon" style="font-size: 14px"></i></div><span slot="title">{{ item.name }}</span></div></template><template v-for="subItem in item.childMenus"><el-submenu v-if="subItem.childMenus && subItem.childMenus.length > 0" :index="subItem.url + ''"><template slot="title"><div class="menu-item"><div class="icon-box"><i :class="subItem.icon"></i></div><span slot="title">{{ subItem.name }}</span></div></template><el-menu-item v-for="(threeItem, i) in subItem.childMenus" :key="i" :index="threeItem.url + ''"><div class="menu-item"><div class="icon-box"><i :class="threeItem.icon"></i></div><span>{{ threeItem.name }}</span></div></el-menu-item></el-submenu><el-menu-item v-else :index="subItem.url + ''" :key="subItem.url"><div class="menu-item"><div class="icon-box"><i :class="subItem.icon"></i></div><span slot="title">{{ subItem.name }}</span></div></el-menu-item></template></el-submenu></template><template v-else><el-menu-item :index="item.url + ''" :key="item.url"><div><div class="icon-box"><i :class="item.icon"></i></div><span slot="title">{{ item.name }}</span></div></el-menu-item></template></template></el-menu></el-aside><el-container><el-header><div style=" display: flex;align-items: center;"><i class="el-icon-s-grid" style="margin-right: 16px" @click="toggleCollapse"></i><!-- 面包屑 --><el-breadcrumb separator-class="el-icon-arrow-right"><el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item><el-breadcrumb-item v-for="name in breadList" :key="name">{{ name }}</el-breadcrumb-item></el-breadcrumb></div><span>Admin</span></el-header><el-main><router-view></router-view></el-main></el-container></el-container></div>
</template>
<script>
import Router from "vue-router";
export default {name: "vueLayout",components: {},data() {return {breadList: [],//请求过来的菜单栏，这里写的是假数据menuslist: [{ childMenus: [], icon: "fa fa-dashboard", name: "首页", url: "/home" },{ childMenus: [], icon: "fa fa-copy", name: "页面一", url: "/Ranking" },{          childMenus: [{ childMenus: [], icon: "fa fa-list-alt", name: "页面一/1", url: "/SecKill/DingDan" },{ childMenus: [], icon: "fa fa-gear", name: "页面一/2", url: "/SecKill/SecKill" }], icon: "fa fa-th-large", name: "页面二", url: "/SecKill"        }],isCollapse: false,activeIndex2: '1',logo: "https://img2.baidu.com/it/u=582969491,551215389&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1671555600&t=1bafb324f81241dc805691367c029ec1",};},computed: {},created() {setTimeout(() => {this.getBreadcrumb();}, 200);},watch: {$route(route) {this.getBreadcrumb();},},mounted() { },methods: {changeSidebar(path) {this.$router.push(path);},toggleCollapse() {this.isCollapse = !this.isCollapse},//遍历面包屑导航getBreadcrumb() {var ms = [];this.menuslist.forEach((m1) => {const m11 = {parent: [],menu: m1,};ms.push(m11);m1.childMenus.forEach((m2) => {const m22 = {parent: [m1.name],menu: m2,};ms.push(m22);m2.childMenus.forEach((m3) => {const m33 = {parent: [m1.name, m2.name],menu: m3,};ms.push(m33);});});});var r = this.$route;var nList = [];ms.forEach((m) => {if (m.menu.url == r.path) {var ns = m.parent;ns.push(m.menu.name);nList = ns;}});this.breadList = nList;},}
}</script>
<style scoped>
.el-menu-item .is-active {background-color: #008afb !important;
}.el-menu-item {height: 40px !important;line-height: 40px !important;
}
.el-header {font-size: 20px;background-color: #ffffff;-webkit-transition: -webkit-box-shadow linear 0.05s;border-color: rgba(25, 39, 142, 0.5);-webkit-box-shadow: 5px 0 5px #c0c0c0;display: flex;justify-content: space-between;align-items: center;
}
.el-menu-item.is-active {background-color: #008afb !important;
}
.menu-nav-header {color: white;height: 58px;line-height: 58px;text-align: center;font-size: 20px;font-weight: bold;background-color: #000f16;display: flex;justify-content: center;align-items: center;flex-direction: row;
}
.icon-box {float: left;width: 30px;text-align: center;
}.menu-item {margin-left: 20px;
}
//修改导航条样式
.el-aside {overflow-y: scroll !important;
}
.el-aside::-webkit-scrollbar {width: 5px;
}
.el-aside::-webkit-scrollbar-thumb {border-radius: 10px;background-color: rgba(53, 54, 54, 0.3);
}
</style>

引入菜单栏图标：Font Awesome，一套绝佳的图标字体库和CSS框架

在public文件夹里的index.html中引入

 <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

配置请求：http://t.csdn.cn/MQgrR

搭建Vue后台管理项目相关推荐

为element ui+Vue搭建的后台管理项目添加图标
问题:使用element UI 及Vue 2.0搭建一个后台管理项目,想要在页面中为其添加对勾及叉的图标. 解决方案:问题涉及到为页面添加图标.有两种解决方案. (1)Element官网提供了Icon ...
从0到1完成一个Vue后台管理项目（九、引入Breadcrumb面包屑，更改bug）
往期从0到1完成一个Vue后台管理项目(一.创建项目) 从0到1完成一个Vue后台管理项目(二.使用element-ui) 从0到1完成一个Vue后台管理项目(三.使用SCSS/LESS,安装图标库 ...
vue后台系统管理项目-角色权限分配管理功能
vue后台系统管理项目: 技术选型:vue + element-ui 菜单权限管理模块功能角色列表查询,通过(角色名称:角色编号:状态:启用.禁用)进行角色数据搜索. 查询.重置.新建角色功能角色 ...
vue考试系统后台管理项目-登录、记住密码功能
考试系统后台管理项目介绍: 技术选型:Vue2.0+Elemenu-ui 项目功能介绍: 账户信息模块:菜单权限.角色权限设置.角色权限分配.账号设置.公司分组考试管理模块:新增/编辑/删除考试试题 ...
一个基于 Go+Vue 实现的 openLDAP 后台管理项目
[公众号回复 "1024",免费领取程序员赚钱实操经验] 大家好,我是章鱼猫. 今天给大家推荐的这个开源你项目来自于读者的投稿.还挺不错的,分享给大家. 这个开源项目是基于Go+ ...
vue考试系统后台管理项目-接口封装调用
上一篇文章 : vue考试系统后台管理项目-登录.记住密码功能_船长在船上的博客-CSDN博客考试系统后台管理项目介绍: 技术选型:Vue2.0+Element-ui 项目功能介绍: 账户信息模块: ...
vue后台系统管理项目-菜单权限管理功能
vue后台系统管理项目: 技术选型:vue + element-ui 菜单权限管理模块功能菜单列表查询,通过(菜单名称:类型分为:全部.一级菜单.二级菜单:状态:启用.禁用)进行数据搜索. 查询.重 ...
电商项目总结java_Vue 电商后台管理项目阶段性总结(推荐)
一.阶段总结该项目偏向前端更多一点,后端 API 服务是已经搭建好了的,我们只需要用既可以,(但是作为一个全栈开发人员,它的数据库的表设计,Restful API 的设计是我们要着重学习的!!!) ...
SSM 电影后台管理项目
SSM 电影后台管理项目概述通过对数据库中一张表的CRUD,将相应的操作结果渲染到页面上. 笔者通过这篇博客还原了项目(当然有一些隐藏的坑),然后将该项目上传到了Github.Gitee,在末尾会 ...

搭建Vue后台管理项目

搭建Vue后台管理项目相关推荐

最新文章

热门文章