rancher教程（三）： rancher 前端项目dashboard架构解析

简介

本篇文章我将给大家讲解一下rancher的dashboard项目的架构。 如果大家想要学习dashboard的前端架构，或者想要移植某个相似的功能到自己公司的容器开发平台，这将是一篇非常不错的入门文章。能够帮助你理清项目的技术栈和目录结构。 此外如果你要给rancher提交pr，也可以先从了解项目开始。 废话不多说让我们先来看看dashboard这个项目结构吧。

主要技术栈

打开dashboard的 package.json文件，项目所有的依赖包都映入眼帘，首先项目使用的是vue.js + nuxt.js。这两个框架是底层的。 用的nuxt是2.14.6版本。该版本对应的vue是2.x。

此外样式方面使用的sass与sass-loader

格式校验使用的eslint，测试使用的jest和cypress(这部分目前用的比较少)

http请求库使用的@nuxtjs/axios

在dashboard的项目中，还存储了一些文档，使用的storybook这个库来进行管理的

操作命令都在package.json中。 package.json中有些命令是直接调用shell脚本，所以对windows开发者很不友好。

如果遇到那个命令无法运行，可能是运行环境不一致。 或许rancher的开发人员人均mac。

在package.json中我看到了"@novnc/novnc": "^1.2.0", 这个包，这个依赖包我直接讲解过，它是用于实现wbe vnc的功能的核心包。web vnc简单来说就是在浏览器里访问某一条主机的桌面，并实质操作。你或许在一些云厂商平台使用过该功能，非常酷炫。其实原理是将桌面服务当做一个对外暴露的web 服务。对外使用socket输出文件流，该文件流可以被渲染成一个canvas画板，画板的内容就是主机的桌面，用户所有的鼠标操作，键盘操作，都会通过socket回传到主机，并进行相应。 可以看看我之前的一篇文章。

dashboard还使用d3做一些图表（竟然没有选择使用echarts），配合jquery完成一些dom操作。终端编辑器使用的"xterm": "^4.9.0",

此外还使用一些常用工具库lodash。解压库jszip，国际化i18n，状态管理vuex

项目目录

page根据nuxt架构的规定，该目录存放的所有文件都是一个单独的页面，这意味着你看到的页面，入口文件都在该目录下，并且你可以根据路径，找到文件。 比如

plugins这里边定义的都是一些插件，比如封装的aixos，VueCodemirror，i18n，

assets 存放的是svg，图片，以及公共样式文件。

chart 存放的是图表相关的组件。日志，监控，备份，istio相关模块用到的图表

components 该目录存放了项目里绝大多数的业务组件以及公共组件。

config 目录里存放的都是定义的静态常量。比如一些下拉框的选项，类型。

edit,detail与list 是抽离出来的编辑页面，详情页，列表页组件。属于基础组件，适用性很强。

store 存放的是vuex中定义的状态。