截止昨天,咱们已经基本掌握了利用vue框架创建一个前端项目的能力,那么今天就开始实际应用于项目中,这里咱们就开发一个简单的sre管理平台系统的前端部分,后面再进行后端api的开发,最后实现一个前后端交互的管理系统demo。从简单开始,一步一步完成,相信到后期就能开发更多复杂项目。
此项目系统的前端开发,用到的技术栈如下,都是比较成熟的技术。
Vue3+webpack5+elementplus+js
先直接上一个简单完成后的系统页面:
主控制面板
k8s资源面板
错误面板
因为我们用的路由模式是history,而不是hash模式,所以错误页面需要单独配置,当然这种模式兼容性比较好,对于这块知识我们后期再说。
一个简单的后台管理系统前端页面差不多就是这个样子,感兴趣的朋友后期就可以跟着我接着开发,一直到比较完善的时候,我会开源至我的仓库,大家可以直接拿来练习。
那么为什么不用最新的技术呢,前端新技术一直更新的很快,刚开始我们需要掌握主流成熟的技术栈即可,随后根据自己能力在选择新技术添加至自己的新项目,比如可以先学会js再去学习js的超集ts。
那么关于技术栈如下:
Vue3+vite4+elementplus/antdesign+ts
的前端开发部分,大家可以后台私信或者加入希里安运维开发知识星球了解。
下面再接着昨天的讲:
昨天已经创建了一个模板vue项目,就是example项目,首先我们先来看看文件里有那些文件。
在我们开始项目之前,先把利用vue框架创建的项目里面的那些文件有那些常用,干啥的,得弄明白,这样才能更加理解项目的框架,以后对于项目的熟悉程度更高,提升自己的开发效率。
上面这是一个模板项目中一般会存在的常用的文件结构,等大家熟悉之后,一定会明白各个文件的作用。
Vuerouter
一看单词就是vue的路由管理,路由的功能大家都知道,根据地址找到对应的服务,那么vue中的组件那么多,怎么找,就得靠router管理。可以在单页的应用中实现组件切换、页面跳转,不需要重新加载页面。
这里一开始我们还是先编写路由,因为你得根据不同功能编写不同的组件,每个组件展示总得有个路径,可以先规划一下自己的功能路径,我们这里就主要先弄两个功能,因为刚开始,一个就是主面板、然后另一个就是404面板,一般就是根据功能路径找到对应页面,没找到的统统弄个404。
Vue中编写路由要使用到vue router这个插件,如果使用vuecli默认生成项目是不带路由管理这个功能的,需要自己单独安装:
然后创建路由实例,index.js内容:
然后再main.js中挂载路由
这实现什么功能了呢,就是/路径对应的是首页页面,/about对应的就是关于的页面。
而我们需要更改的就是根路径下的主页面,这个主页面作为整个页面的框架,创建一个layout或者home的vue组件作为父组件,其他页面作为组件即可。
然后接下来咱们就简单实现一个控制面板和一个404页面即可,由于代码较长就不在这里粘贴了。
后面再接着讲解如何实现控制面板的页面和404的页面,感兴趣的朋友可以关注下。
END
领取专属 10元无门槛券
私享最新 技术干货