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的地址），否则会编译报错。

前言：Flutter系列的文章我应该会持续更新，从User Interface(UI)到数据相关（文件、数据库、网络）再到Flutter进阶（平台特定代码编写、测试、插件开发等），欢迎感兴趣的读者持续关注(可以扫描左边栏二维码或者搜索”IT工匠“关注微信公众号/头条号（微信公众号和头条号同名），会同步推送)。

众所周知Google对于Flutter的期望是全平台统一UI开发，号称要做一套**“一份代码、全平台部署”**的UI框架，这一点在移动端已经很成熟了，国内有很多成功的案例，典型的像阿里的闲鱼客户端，但是Flutter所声称的桌面端和Web端的相关案例还很少，之前我写过一篇文章介绍如何将Flutter代码部署成为桌面端程序，那么本文就该介绍如何将Flutter部署为Web应用了。

本文将会以一个实例来带大家一步一步探寻如何将Flutter应用程序部署到web端，我们先来看一下最终的效果：

可以看到，就是一个简单的登录界面，没有太复杂的逻辑，旨在帮助大家走通Flutter部署到Web端的流程，至于实际的应用场景大家可以根据自己的需要自行开发。

开发环境配置

Flutter 1.5及更高的版本才支持Web端部署，这主要指的是将Dart编译为JavaScript，所以，必须要确保我们本地的Flutter SDK的版本在v1.5.4以上，建议直接使用命令flutter upgrade更新到最新版即可。

安装flutter_web编译工具

要想将Flutter代码编译为Web端可部署的应用程序，必须安装flutter_web，这是一个Flutter官方为我们开发并维护的编译工具，直接使用以下命令安装即可：

flutter pub global activate webdev

安装完成后，需要配置环境变量，直接将$HOME/.pub-cache/bin加入到你的环境变量中即可，由于电脑不同的操作系统配置环境变量的方式不同，这里就不一一展开赘述了，以mac操作系统为例：

cd
vim .bash_profile

然后添加一行：

 export PATH="$PATH":"$HOME/Flutter/flutter/.pub-cache/bin"

退出并保存，使用如下命令使其生效：

source .bash_profile

至此，我们的开发环境就搭建好了，可以看出，只要我们本地的Flutter环境配置的没有问题，配置Flutter for web只是多装了一个flutter_web编译工具而已，非常简单。

创建项目

区别于普通的Flutter项目，由于Flutter对web的支持目前还没有完全完成，相当于是一个供大家尝鲜的作品，所以创建Flutter for web项目和普通Flutter项目不一样，这里建议大家使用idea，我这里也以idea为例进行说明：

创建Dart项目，而不是Flutter项目

直接在Idea中新建项目，如下图所示：

注意三点：

1. 选择Dart项目，而不是新建Flutter项目
2. 正确设置自己dart sdk的位置
3. 选择Generate sample content中的Flutter Web App选项

创建完成后我们的项目就默认支持部署到Web了，在Idea中应该可以直接点击运行按钮进行运行，或者可以在Idea的终端中输入：

webdev serve

进行运行，初次编译可能会下一些本项目所依赖的包，需要一分多钟，后面编译会快很多，编译完成后会弹出一个浏览器的窗口（注意，这里建议使用Chrome浏览器，其他浏览器笔者没有测试过，按照官方的说法，目前支持最好的应该是Chrome浏览器）如下图：

我们来看看项目结构：

可以看到，大体的项目结构了普通的Flutter项目差不多，知识多了一个web文件夹，下面是一些和web相关的文件和资源，后面我会具体讲其用处。

编写代码

创建好项目之后，我们就可以着手代码的编写了，这里不再详细叙述代码怎么写，和普通Flutter编写代码的规则是一模一样的，这里我在lib文件夹下新建了一个pages文件夹，然后新建了login_page.dart文件，编写登录界面的代码，完成后代码如下：

import 'package:flutter_web/material.dart';

class LoginPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => new _LoginState();
}

class _LoginState extends State<LoginPage> {
  static final GlobalKey<ScaffoldState> _scaffoldKey =
      new GlobalKey<ScaffoldState>();

  final TextEditingController _phoneController = new TextEditingController();
  final TextEditingController _passwordController = new TextEditingController();

  bool _correctPhone = true;
  bool _correctPassword = true;

  bool showProgress = false;

  void _checkInput() {
    if (_phoneController.text.isNotEmpty) {
      _correctPhone = true;
    } else {
      _correctPhone = false;
    }
    if (_passwordController.text.isNotEmpty) {
      _correctPassword = true;
    } else {
      _correctPassword = false;
    }
    setState(() {});
  }

  _handleSubmitted(int flag) async {
    /**
     * flag=0:管理员登录
     * flag=1：用户登录
     */
    _checkInput();
    if (!_correctPassword || !_correctPhone) {
      return;
    }
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        key: _scaffoldKey,
        resizeToAvoidBottomPadding: false,
        body: new Stack(children: <Widget>[
          new Container(
            decoration: new BoxDecoration(
                image: new DecorationImage(
                    image: new AssetImage('images/bg.jpeg'),
                    fit: BoxFit.cover)),
          ),
          new GestureDetector(
            onTap: () {
              FocusScope.of(context).requestFocus(new FocusNode());
            },
          ),
          _buildLogInWidgets(),
        ]));
  }

  _buildLogInWidgets() {
    Color mainColor = Colors.black;
    return new Column(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly, //垂直方向对其方式
      crossAxisAlignment: CrossAxisAlignment.start, //水平方向对其方式

      children: <Widget>[
        Center(
          child: new Container(
            child: Center(
              child: new CircleAvatar(
                  backgroundImage: AssetImage("images/iron_man_icon.png")),
            ),
          ),
        ),
        new Center(
          child: new Container(
            width: MediaQuery.of(context).size.width * 0.5,
            child: new Column(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: <Widget>[
                  new Container(
                    padding: const EdgeInsets.only(top: 32.0),
                    child: new TextField(
                      style: TextStyle(color: Colors.black),
                      cursorColor: mainColor,
                      controller: _phoneController,
                      keyboardType: TextInputType.text,
                      decoration: new InputDecoration(
                        hintText: '用户名',
                        hintStyle: TextStyle(color: mainColor),
                        errorText: _correctPhone ? null : '用户名不可为空！',
                        errorStyle: TextStyle(color: Colors.teal),
                        icon: new Icon(Icons.people, color: mainColor),
                        focusedBorder: UnderlineInputBorder(
                            borderSide: BorderSide(color: mainColor)),
                        enabledBorder: UnderlineInputBorder(
                            borderSide: BorderSide(color: mainColor)),
                        errorBorder: UnderlineInputBorder(
                            borderSide: BorderSide(color: mainColor)),
                      ),
                      onSubmitted: (value) {
                        _checkInput();
                      },
                    ),
                  ),
                  new Container(
                    padding: const EdgeInsets.only(top: 32.0),
                    child: new TextField(
                      style: TextStyle(color: Colors.black),
                      cursorColor: mainColor,
                      controller: _passwordController,
                      obscureText: true,
                      keyboardType: TextInputType.text,
                      decoration: new InputDecoration(
                        hintText: '密码',
                        hintStyle: TextStyle(color: mainColor),
                        errorText: _correctPassword ? null : '密码不可为空！',
                        errorStyle: TextStyle(color: Colors.teal),
                        icon: new Icon(Icons.lock_outline, color: mainColor),
                        focusedBorder: UnderlineInputBorder(
                            borderSide: BorderSide(color: mainColor)),
                        enabledBorder: UnderlineInputBorder(
                            borderSide: BorderSide(color: mainColor)),
                        errorBorder: UnderlineInputBorder(
                            borderSide: BorderSide(color: mainColor)),
                      ),
                      onSubmitted: (value) {
                        _checkInput();
                      },
                    ),
                  )
                ]),
          ),
        ),
        new Center(
            child: new Column(
          children: <Widget>[
            new Container(
              width: MediaQuery.of(context).size.width * 0.2,
              child: new Material(
                child: new FlatButton(
                  child: new Container(
                    child: new Center(
                        child: new Text(
                      "登录",
                      textScaleFactor: 1.5,
                      style: new TextStyle(
                          color: Colors.white, fontFamily: "Roboto"),
                    )),
                  ),
                  onPressed: () {
                    _handleSubmitted(0);
                  },
                ),
                color: Colors.teal,
                borderRadius: BorderRadius.circular(10.0),
                elevation: 5.0,
              ),
            ),
            new Center(
                child: Container(
              margin: EdgeInsets.only(top: 20),
              child: new FlatButton(
                child: new Text("没有帐户？ 注册",
                    style: new TextStyle(color: Colors.teal)),
              ),
            )),
          ],
        )),
      ],
    );
  }
}

可以看到，代码和普通Flutter代码是一样的，只是需要注意以下几点：

包的使用

细心的同学可能会发现，我们这里导入的包是：

import 'package:flutter_web/material.dart';

而普通Flutter项目导入的是：

import 'package:flutter/material.dart';

原则就是原来的 package:flutter 改为 package:flutter_web ，原来的 dart:ui 改为 package:flutter_web_ui/ui.dart，当然，这些你只需要知道就好了，实际生产的时候直接快捷键按下，编辑器会自动帮我们导入正确的包。

资源的使用

我们之前使用资源文件(比如图片)的方式是在根目录下新建一个资源文件夹，然后将资源文件放在资源文件夹下，然后在pubspec.yaml文件中进行文件路径的声明，然后就可以使用了，在Flutter for web中，我们需要将原来的资源文件夹从之前的项目根目录迁移到web文件夹下，就像这样：

然后就可以正常使用了，这也是迄今为止我发现的Flutter for web和普通Flutter项目的不同之处了。

编写完布局文件后我们将main.dart稍作修改，引入我们的LoginPage：

import 'package:flutter_web/material.dart';
import 'package:flutter_web_demo/pages/login_page.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page22'),
    );
  }
}

class MyHomePage extends StatelessWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: LoginPage());
  }
}

然后我们就可以运行起来看效果了：

和开篇的效果图一样，不再赘述。

总结

本文我们通过一个简单的实例带大家走了一遍Flutter在web端部署的流程，可以看到，目前Flutter在Web上的部署已经没有任何压力了，只是由于生态还不完整，很多库和包还不能用，所以目前还无法投入商用软件中，希望Flutter可以发展的越来越完善。同时，结合笔者个人的开发经验，建议大家开发Flutter项目时一定不要怕麻烦，多用像mvp这类的项目结构，这样可以大大提高开发效率。

关于Flutter for web的更多资料，可以参考Flutter官方的仓库：https://github.com/flutter/flutter_web。