本期推荐的 Dckr 是一款基于Docker的容器配置及编排的向导式构建工具。（支持Docker、Compose、Kubernets、Rancher的资源文件向导式构建）

项目目标

• 通过语义化UI向导式的指引你去构建相关容器配置、编排文件，降低了你的学习成本。
• 通过转换功能，能轻松地将不同容器产品的配置文件进行相互转换，极大地提高了你的工作效率。
• 通过它进行构建的YAML文件是符合规范的，让你摆脱编写YAML文件因缩进等格式问题带来的痛苦。
• 通过它你可以轻松对相关配置项进行更改，然后点击构建按钮，编辑器内容也会相应变化；可用于辅助容器相关教学。
• 它的实现方案，能为诸如：”通过语义化UI实现配置文件的生成”等各种需求，提供一定的思路甚至是一种解决方案。

快速开始

本地运行

git clone https://github.com/LGSKOKO/Dckr.git

cd Dckr

npm install 

npm run serve

服务器部署

#1、修改项目src目录下的request.js文件，将localhost改为具体的后端部署ip地址
#2、执行下面命令
npm run build
#3、将dist目录拷贝至已安装配置好的Web服务器上（apache或nginx等）。
#4、输入相应的http地址即可，大功告成！！！

项目结构

.
├── public                                      // 静态资源文件
│   ├── favicon.jpg                             // 项目图标
│   └── index.html                              // 项目html入口文件
├── screenshots                                 // 项目截图
├── src                                         // 源码目录
│   ├── components                              // 组件
│   │   ├── DockerCompose                       // Compose模块组件
│   │   │   ├── Step1.vue                    	
│   │   │   ├── Step2.vue                    	
│   │   │   ├── Step3.vue                    	
│   │   │   ├── Step4.vue                    	
│   │   ├── Dockerfile                          // Docker模块组件
│   │   │   ├── Step1.vue                    	
│   │   │   ├── Step2.vue                    	
│   │   │   ├── Step3.vue                    	
│   │   │   ├── Step4.vue                    	
│   │   │   ├── Step5.vue                    	
│   │   ├── Kubernetes                          // Kubernetes模块组件
│   │   │   ├── common                   		// Kubernetes模块最基础组件
│   │   │   |	├── Base.vue                    // 填写基础信息组件
│   │   │   |	├── Container.vue               // 填写容器配置组件
│   │   │   |	├── Other.vue                   // 填写其他信息组件
│   │   │   |	└── Volume.vue                  // 填写磁盘挂载信息组件
│   │   │   ├── template                   		// 在common基础上抽象一层的组件
│   │   │   |	├── OtherTemplate.vue           // Deployment和ReplicaSet组件的OtherTemplate模板组件
│   │   │   |	└── PodTemplate.vue             // Deployment和ReplicaSet组件的PodTemplate模板组件
│   │   │   ├── ConfigMap.vue                   // ConfigMap模板组件
│   │   │   ├── Deployment.vue                  // Deployment模板组件
│   │   │   ├── Pod.vue                    		// Pod模板组件
│   │   │   ├── ReplicaSet.vue                  // ReplicaSet模板组件
│   │   │   ├── Secret.vue                    	// Secret模板组件
│   │   │   └── Sevice.vue                    	// Service模板组件
│   │   ├── Editor.vue                          // 编辑器公共组件
│   │   ├── Header.vue						  // 头部公共组件
│   │   └── Sider.vue						  // 侧边栏公共组件
│   ├── router
│   │   └── index.js                           	// 路由配置
│   ├── store								
│   │   └── index.js                           	// Vuex配置
│   ├── view                                  	
│   │   ├── CreateDockerCompose.vue             // Compose模块页面
│   │   ├── CreateDockerfile.vue                // Docker模块页面
│   │   ├── CreateKubernetes.vue                // Kubernetes模块页面
│   │   ├── CreateRancher.vue                   // Racnher模块页面
│   │   └── Home.vue                   		   // 主页面
│   ├── App.vue                                // 页面入口文件
│   ├── commonUtil.js                          // 自定义工具文件
│   ├── main.js                                // 程序入口文件，加载各种公共组件
│   └── request.vue                            // 自定义项目请求文件
└──

运行截图

Docker模块

Compose模块

Kubernetes模块

向导式构建

Rancher模块