【项目实践】使用Vue.js和ElementUI快速实现后台管理系统的界面布局

//整体布局样式，让整个视图充满html,body,#app{height:100%;宽度：100%；保证金：0；填充：0；}【项目实践】使用Vue.js和ElementUI快速实现后台管理系统的界面布局人性化，界面简洁明了，方便数据管理。不过现在常见的后台管理系统的界面布局都差不多，都是上中下结构，左边是导航栏。随便贴两个Bootstrap主题模板是这样的：难点不在于布局，而在于如何点击左侧导航栏渲染中央显示界面（路由）。这里我将使用Vue.js和ElementUI来快速搭建这样一个后台管理界面布局！本文准备项目用到的工具和版本号如下：node.js--v12.16.1npm--6.13.4@vue/cli--4.2.2版本不一样，改不了太大了。首先，使用Vue-cli工具快速搭建一个Vue项目（这里不讲解如何使用Vue-cli搭建项目，文末有项目的github演示地址，下载即可并运行）项目建好后，再Down导入我们要使用的组件，我这里使用ElementUI和font-awesome图标（当然你也可以直接使用ElementUI中的图标）。使用npm安装两个工具：npminstallelement-uinpminstallfont-awesome安装完成后，在main.js中导入两个工具，这样就可以在项目中使用了：importVuefrom'vue'importAppfrom'./App.vue'importrouterfrom'./router'//ImportElementUIimportElementUIfrom'element-ui';import'element-ui/lib/theme-chalk/index.css';//importfont-awesome(import可以用直接)import'font-awesome/scss/font-awesome.scss'//使用ElementUIVue.use(ElementUI);Vue.config.productionTip=falsenewVue({router,render:h=>h(App)}).$mount('#app')所有配置路由准备好后，我们来修改App.vue文件。这是整个项目的界面入口，所以我们在这里定义最基本的视图：//整体布局样式，让整个视图充满html,body,#app{height:100%;宽度：100%；保证金：0；填充：0；}视图配置完成后，下一步就是配置路由设置。我们先新建四个页面组件：Main.vue、Index.vue、Setting.vue、404.vue。这个后面会用到，Index.vue和Setting.vue都是Main.vue的嵌套路由。为了演示，在Index.vue和Setting.vue中只写了一个简单的一级标题。此时我们的项目结构如下：然后我们开始在router的js文件中配置路由，注意注释：importVuefrom'vue'importVueRouterfrom'vue-router'Vue.use(VueRouter)constroutes=[{//重定向，用于指向网页一打开就跳转到哪个路由path:'/',redirect:'/main'},{//首页path:'/main',name:'Main',component:()=>import('../views/Main.vue'),children:[//开始嵌套路由，下面所有路由都是Main路由的子路由{path:'/',//嵌套路由中默认哪个网页redirect:'/index'},{path:'/index',//首页的路由名称:'Index',component:()=>import('../views/Index.vue')},{path:'/setting',//路由名称:'Setting',component:()=>import('../views/Setting.vue')}]},{path:'/*',//注意这不是嵌套路由。这个是设置404页面，必须放在最后，这样当服务器找不到页面的时候，会全部跳转到404name:'404',component:()=>import('../views/404.vue')}]constrouter=newVueRouter({mode:'history',base:process.env.BASE_URL,routes})exportdefaultrouter路由配置好了，下一步就是Main.vue中最重要的布局我们先在Main.vue中安排最基本的结构，即top,middle,bottom,andleftandrightinthemiddle:这是最基本的布局，我们只需要渲染相应区域的内容即可，这里最重要的是重要的是使用ElementUI中的路由功能我们把Main.vue里面的内容完整的写出来，注意注释：站点设置角色管理商店模板会员管理会员列表会员须知/*整体显示区域布局样式*/.el-container{height:100%;}.el-header,.el-main{填充：0;}/*左侧导航栏的具体样式*/.el-menu-vertical-demo.el-menu{padding-left:20px;文本对齐：左；高度：100%；填充：0；}el-container>.el-menu-vertical-demo.el-menu{padding:0;}.el-submenu.el-menu-item,.el-menu-item{最小宽度：50px；}.el-menu-item{padding:0;}此时页面已经准备好了，我们来看看效果：项目的github地址如下：https://github.com/RudeCrab/rude-java/tree/master/project-practice/vue-route-democlone可以在本地运行。如果对你有帮助，请在github上点个star。我会持续更新更多【项目实践】！