vue 右边跳转 实现左侧栏_vue+element 实现后台管理系统（登录+侧边菜单栏）

公司最近项目是后台管理系统，由我负责，网上找模板发现还需要改很多地方，而且那些模板也没有写代码的实现思路，对于vue项目经验不足者很难看懂，所以就按照自己的思路从零实现一遍，过程讲解还是比较详细的，若是有不足之处还请指正。

整体布局：

登录：

菜单：

准备工作：

1、安装elementui

npm i element-ui -S

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

2、配置路由

index.js:

import Vue from 'vue'import VueRouter from'vue-router'const Home= () => import('../views/home/Home.vue')

const Login= () => import('../views/login/Login.vue')

Vue.use(VueRouter)

const routes=[

{

path:'/',

name:'Login',

component: Login

},

{