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

在 刚刚的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,用来开启本地服务器的包,执行

pub global activate webdev
or
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

测试完成!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 特别说明 当前博客平台账号已废弃,如果有使用细节问题请前往我新博客平台进行讨论交流。 个人博客平台 HuRuWo的...
    善笃有余劫阅读 4,996评论 0 30
  • 网络请求 http ^0.11.3+16 pub.dartlang.org/packages/ht… github...
    ibobo999阅读 2,359评论 0 20
  • Flutter简介 Flutter 是 Google推出并开源的移动应用开发框架,主打跨平台、高保真、高性能。开发...
    moxuyou阅读 3,307评论 0 6
  • flutter 是什么 flutter是Google基于Dart语言开发的移动应用开发框架,在保持原生性能的条件下...
    ChaoWang阅读 1,383评论 0 2
  • 俞合最近很心烦,抓着满杯的酒问我,为什么老遇不到合适的人。 眉头一锁,眼睛一闭,他说他的心太乱,要一点空白,为什么...
    易日阅读 618评论 0 0