SRE管理系统之前端篇

截止昨天，咱们已经基本掌握了利用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