iOS开发Flutter中文社区Flutter项目及知识学习

Flutter-web项目在Mac上面的测试

2019-05-11  本文已影响2人  DreamMmMmM

在 刚刚的Google I/O 2019 上,Dart 团队宣布推出新的 Flutter 稳定版本 1.5,这是 Flutter 迄今为止最大的一次版本发布。
伴随着 Flutter 1.5 的发布,同期也宣布发布 Flutter for Web 的 Preview 版本,正式开启了 Flutter 的全平台 UI 框架之路。

话不多说,开始测试下(前提Flutter版本必须为1.5.4以上,使用flutter upgrade来更新你的flutterSDK),

开始:
设置环境变量,终端输入open -e .bash_profile

编辑添加环境变量

export PATH="$PATH":"$HOME/.pub-cache/bin"
export PATH=$PATH:/Users/XXX/flutter/bin/cache/dart-sdk/bin

xxx是你电脑上fluttersdk安装的路径, 保存后,
使用source ~/.bash_profile使环境变量立即生效,

然后安装webdev package,用来开启本地服务器的包,执行

flutter packages pub global activate webdev

安装完成后,使用VSCode或Android Studio创建一个web项目,我使用VSCode,


image.png

创建完成后,进入到项目目录执行flutter packages upgrade,

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

完成后,在终端执行webdev serve 来开启web服务器8080端口,
如果后面添加--auto restart可以和热重载一块使用;

image.png

运行成功后,打开http://localhost:8080,可以看到一个hello world,我这里简单写了一个百度的首页,

image.png image.png 测试下热重载,修改下新闻666,改成cxk接球, image.png

保存一下,在看下网页已经更改了,


image.png

测试完成!

上一篇下一篇

猜你喜欢

热点阅读