openbmc下有两个webui的软件包，分别是phosphor-webui和webui-vue，phosphor-webui软件包基于AngularJS开发，而AngularJS在2021年6月30日停止维护，故phosphor-webui软件包社区也已经停止了维护和更新，所以社区推出了基于VUE开发的webui-vue 来代替phosphor-webui的功能，目前，webui-vue的功能基本包含了所有phosphor-webui的功能，并且增加一些新功能，比如语言切换，web界面风格变化等。同时，由于新web基于VUE开发，使得我们二次开发更容易（本人觉得……^_），特别是VUE组件等特性使得非前端工作者开发起来更容易。本文主要是将基于webui-vue的开发。

1 webui-vue简介

webui-vue软件包创建于2020年6月8日，软件包地址：https://github.com/openbmc/webui-vue。
webui-vue软件包是基于vue开发的，VUE是一套用于构建用户界面的渐进式JavaScript框架，其开发者是阿里巴巴Weex团队技术顾问的尤雨溪。Vue早期开发的灵感来源AngularJS，但是与AngularJS以及其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用，并且在AngularJS 中存在的许多问题，在 Vue 中已经得到解。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。webui-vue学习地址：https://vuepress.vuejs.org，VUE官方文档：http://vuejs.org/v2/guide/syntax.html，VUE中文文档: https://cn.vuejs.org/v2/guide/syntax.html

2 webui-vue本地开发基础

2.1 开发前准备

webui-vue基于vue开发，目前vue开发要求nodjs要高于10.0，因此需要确保开发环境中的nodejs版本是10.0以后，同时也要提高npm的版本。（ubuntu18.04以及之前的版本需要更新npm、node）

sudo npm install -g n
sudo n stable
sudo npm i -g npm
hash -d npm

1、这里使用node包管理工具软件“n”来管理不同的nodejs版本。
2、如果nodejs版本过低需要先更新nodejs然后在更新npm。
3、 n、node、npm都是安装在“/usr/local/bin”下，“hash -d npm”命令可以清理缓存已更新命令的正确位置。

n软件包还有如下命令

//安装官方最新版本
sudo n latest
//安装官方最新LTS版本
sudo n lts

一般国内使用npm时由于网络原因会导致下载慢，可以使用淘宝的镜像，使用如下命令：

sudo npm install -g cnpm --registry=https://registry.npmmirror.com

安装cnpm后可以使用cnpm代替npm命令以加快modules下载速度。

2.2 获取webui-vue源码

git clone https://github.com/openbmc/webui-vue.git

2.3 创建本地开发文件

创建“.env.development.local”文件，在文件中至少填入如下内容：

BASE_URL="https://192.168.122.51"

1、BASE_URL="https://192.168.122.51"是指定本地的代理服务器从哪里的源来更新数据，“192.168.122.51”是实际BMC的IP地址（或者是qemu上运行的镜像地址）
2、如果没有创建“.env.development.local”文件，执行编译会有下图的错误。

2.4 编译及运行

//安装node_modules
npm install
//编译并运行本地代理服务
npm run serve

1、 “npm install”用于安装modules，第一次编译需要执行，后边不需要再次运行。如果执行该命令一直报错，可以执行“npm cache clean -f”后在执行“npm install”。
2、“npm run serve”前面可以先执行“npm run build”，不执行的话也可以，“npm run serve”会自动执行“npm run build”
3、如果要是用淘宝的镜像，镜“npm”换成“cnpm”即可

运行结果：
phosphor-webui

webuiu-vue

1、phosphor-webui是编译在BMC镜像中的，而webui-vue是在本地开发通过本地代理服务器访问实际BMC镜像中的服务器。
2、本地webui-vue使用的是最新的源码，修改本地源码后会自动进行编译，刷新web即可得到新的结果。
3、由于webui-vue作为前端，依赖于后端的webserver，因此，最好使用openbmc下比较新版本的webserver，否则，可能会出现一些页面获取不到数据护着数据错误等情况。

3 小结

本文主要是webui-vue开发的基础，后面会循序渐进做进一步开发分享。
在本地开发时首先要保证node的版本，一般更新到稳定版。其次是创建“.env.development.local”文件，在文件中指实际服务器的地址（bmc的地址），否则会编译报错。

openbmc开发30：webui开发—基础相关推荐

openbmc开发31：webui开发—汉化
webui-vue软件包基于i18n( internationalization国际化的英文单词,首末字符i和n,18为中间的字符数)已经支持了支持英语.西班牙语.俄语三种语言(实际西班牙语和英语没什 ...
《微信公众平台开发：从零基础到ThinkPHP5高性能框架实践》——3.3　微信开发者中心...
本节书摘来自华章计算机<微信公众平台开发:从零基础到ThinkPHP5高性能框架实践>一书中的第3章,第3.3节,作者方倍工作室,更多章节内容可以访问云栖社区"华章计算机&qu ...
java开发环境及数据类型实验_实验项目1 Java开发环境与语言基础
<实验项目1 Java开发环境与语言基础>由会员分享,可在线阅读,更多相关<实验项目1 Java开发环境与语言基础(14页珍藏版)>请在人人文库网上搜索. 1.实验项目1 Ja ...
java反射和注解开发（备java基础，javaee框架原理）-任亮-专题视频课程
java反射和注解开发(备java基础,javaee框架原理)-5358人已学习课程介绍 Java注解是附加在代码中的一些元信息,用于一些工具在编译.运行时进行解析和使用,起到说明. ...
前端开发 30 年变迁史
[程序人生编者按]1990年,第一个Web浏览器诞生,而WWW的诞生直接拉开前端史的序幕. 从静态页面到JavaScript,从依赖后端到自主开发,前端开发者从不被重视的"页面仔" ...
跟着王进老师学开发Python篇：基础强化案例讲解-王进-专题视频课程
跟着王进老师学开发Python篇:基础强化案例讲解-143人已学习课程介绍共计27个项目案例+项目源码,跟着王进老师尽情玩转Python解释器! 案例涵盖的内容有:Python程序 ...
跟着王进老师学开发Python篇：基础入门案例讲解-王进-专题视频课程
跟着王进老师学开发Python篇:基础入门案例讲解-166人已学习课程介绍共计45个项目案例+项目源码,跟着王进老师尽情玩转Python解释器! 本课程涉及Python的基础语法, ...
Erlang服务端开发（无需Erlang基础）笔试题
某游戏公司Erlang服务端开发(无需Erlang基础)笔试题,面向C/C++程序员一.用你熟悉的语言解决下面的问题. 1.反转输出字符串,并移除其中的空格. 2.快速的判断一个数是否素数的方法. ...
java iterator如何知道数量_Java开发岗面试题基础篇（二）
点击蓝字关注wo们老哥们,接上篇<Java开发岗面试题--基础篇(一)>,本期推出Java开发岗面试题--基础篇(二),来看看Java中的集合.多线程.异常体系等知识在面试中是怎么体现 ...
【电子书】C++编程开发30问
2019独角兽企业重金招聘Python工程师标准>>> C++编程开发30问 C++高效性和兼容性使其技术的应用越来越广泛,也使更多的人投入了C++的怀抱.本电子书收集并 ...

openbmc开发30：webui开发—基础