dubbo新的版本采用前后端分离技术，在github上下载的时候，不仅仅只是一个dubbo-admin

而是将admin包分离为dubbo-admin-ui前端包和dubbo-admin-server后端包

 

首先，无论运行前端包还是后端包，我们都应该首先启动的是zookeeper消息件。

本人安装到了Linux系统中，所以进入它的安装目录的bin目录下，执行指令：

 

./zkServer.sh start #启动zk服务端

./zkServer.sh status #查看zk服务端状态

./zkCli #启动zk客户端（使得主机的端口可以被访问到）

 

此时将它运行在后台，启动了监听，不必去动它。

 

接下来，来配置dubbo

首先配置的是dubbo-admin-server\src\main\resources下的application.properties文件：

以下为默认本机的配置，将它注释掉（如果配置在虚拟机的话，否则跳过此配置步骤）

admin.registry.address=zookeeper://127.0.0.1:2181
admin.config-center=zookeeper://127.0.0.1:2181
admin.metadata-report.address=zookeeper://127.0.0.1:2181

而后，将zookeeper配置改为Linux的地址：

admin.registry.address=zookeeper://192.168.200.130:2181
admin.config-center=zookeeper://192.168.200.130:2181
admin.metadata-report.address=zookeeper://192.168.200.130:2181

接下来，进入dubbo-admin-server，在cmd窗口运行之，并执行如下命令进行跳过test的打包：

mvn clean package -Dmaven.test.skip=true

经过漫长的等待，发现在dubbo-admin\dubbo-admin-server\target目录下生成了两个jar文件，而后进入cmd，运行之：

java -jar dubbo-admin-server-0.5.0.jar

此时端口Tomcat8080已启动，成功进入监听状态

ok，后端配置已经结束，接下来配置前端，并执行browser的可视化操作界面

进入dubbo-admin\dubbo-admin-ui的cmd窗口

此处我们需要配置一些列框架才能生效，例如Vue、webpack...

npm install #安装npm
npm -v #检查npm版本
npm install -g webpack #安装webpack
npm install -g webpack-cli #安装webpack-cli
webpack -v #检查webpack版本
npm run dev #运行，启动监听

这时对cmd进行观测，发现App running at：Local: http://localhost:8002/

在edg输入localhost:8002

不出意外的话，此时已经成功弹出dubbo的可视化管理界面Dubbo Admin，默认的用户名和密码在
dubbo-admin-server\src\main\resources\application.properties中显示均为root

搞定收工！