【金秋打卡】第6天 使用Vue cli 4搭建管理控台

2022/10/31 4:25:02

本文主要是介绍【金秋打卡】第6天 使用Vue cli 4搭建管理控台,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

课程名称:Spring Cloud+ Vue前后端分离开发企业级在线视频系统

课程章节:第4章 使用Vue cli 4搭建管理控台

讲师姓名:甲蛙老师

课程内容

①集成bootstrap后台管理模板ace:Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架,使得 Web 开发更加快捷

②控台欢迎页面开发:通过修改ace模板制作欢迎页面

课程收获

修改模板的技巧:最重要的就是要删除不需要的页面,首先通过查找相邻元素定位到相关位置,折叠标签之后整段删除。

使用this.$router.push("/admin")方法进行页面跳转

export default {
   name: 'login',
   methods:{
     login(){
       this.$router.push("/admin")
     }
   },
   mounted() {
     $('body').removeClass('no-skin');
     $('body').attr('class', 'login-layout light-login');
   }
 }

removeClass()方法从所选元素中删除一个或多个类名称。如果将类名作为参数包括在内,则只会删除该类。如果在参数中未指定类名,则将删除所有类。

https://img3.sycdn.imooc.com/635d451800011cef19200842.jpg

在登录页的样式需要有所修改,采用先移除后替换类的方式进行美化。




这篇关于【金秋打卡】第6天 使用Vue cli 4搭建管理控台的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程