配置环境

克隆flutter web仓库

git clone https://github.com/flutter/flutter_web.git

安装flutter web构建工具

进入flutter web仓库目录,执行如下命令,安装构建工具

$ flutter pub global activate webdev

Hello world

配置依赖(可选)

如果没有采用git clone获取的flutter web,那么你可能需要做一些额外的配置。
flutter web目录下有一个example目录,进入该目录的hello_world项目目录
打开pubspec.yaml配置文件,在相应的地方设置如下配置

name: flutter_web.examples.hello_world

environment:
  # You must be using Flutter >=1.5.0 or Dart >=2.3.0
  sdk: '>=2.3.0-dev.0.1 <3.0.0'

dependencies:
  flutter_web: any
  flutter_web_ui: any

dev_dependencies:
  build_runner: ^1.4.0
  build_web_compilers: ^2.0.0

dependency_overrides:
  flutter_web:
    path: ../../packages/flutter_web
  flutter_web_ui:
    path: ../../packages/flutter_web_ui

#下面的配置,指定了flutter web的源
# flutter_web packages are not published to pub.dartlang.org
# These overrides tell the package tools to get them from GitHub
dependency_overrides:
  flutter_web:
    git:
      url: https://github.com/flutter/flutter_web
      path: packages/flutter_web
  flutter_web_ui:
    git:
      url: https://github.com/flutter/flutter_web
      path: packages/flutter_web_ui

获取(升级)

hello_world项目目录,执行命令

$ flutter pub upgrade
或者
$ flutter pub get

成功后应看到类似信息

! flutter_web 0.0.0 from path ../../packages/flutter_web                
! flutter_web_ui 0.0.0 from path ../../packages/flutter_web_ui 
Running "flutter pub upgrade" in hello_world...                    10.0s

运行

$ flutter pub global run webdev serve

成功则会看到类似信息

[INFO] Building new asset graph completed, took 1.4s

[INFO] Checking for unexpected pre-existing outputs. completed, took 1ms

[INFO] Serving `web` on http://127.0.0.1:8080

使用浏览器打开http://localhost:8080
在这里插入图片描述

Logo

开源鸿蒙跨平台开发社区汇聚开发者与厂商,共建“一次开发,多端部署”的开源生态,致力于降低跨端开发门槛,推动万物智联创新。

更多推荐