让前端开发者失业的技术，Flutter Web初体验

将安装包zip解压到你想安装Flutter SDK的路径（如：C:srcflutter；留意，不要将flutter安装到必要一些高权限的路径如C:Program Files）。记着，之后往情形变量的path中添加；C:srcflutterbin，以便于你能在呼吁行中行使flutter。

行使镜像

因为在海内安装Flutter相干的依靠也许会受到限定，Flutter官方为中国开拓者搭建了姑且镜像，各人可以将如下情形变量插手到用户情形变量中：

FLUTTER_STORAGE_BASE_URL： https://storage.flutter-io.cn

5、安装Dart与Pub。安装webdev、stagehand

Pub是Dart的包揽理器材，相同npm，绑缚安装。

Dart安装版地点： http://www.gekorm.com/dart-wi...

默认安装即可，安装之跋文住Dart的路径，而且设置到情形变量path中，以便于可以在呼吁行中行使dart与pub，默认的路径是：C:Program FilesDartdart-sdkbin

先安装stagehand，stagehand是建设项目必需的器材。查察一下 C:UserschunpengliuAppDataRoamingPubCachebin 目次下是否包括stagehand和webdev，假若有，添加到情形变量的path内里，假如没有，按下面要领安装：

pub global activate stagehand 

webdev是一个相同于Koa的web处事器，执行以下呼吁安装

pub global activate webdev 
# or 
flutter packages pub global activate webdev 

6、设置编辑器安装Flutter和Dart插件

Flutter插件是用来支持Flutter开拓事变流 (运行、调试、热重载等)。

Dart插件 提供代码说明 (输入代码时举办验证、代码补全等)。Android Studio的配置在File-》setting-》plugins-》搜刮Flutter和Dart，安装之后重启。

VS code的配置在extension-》搜刮Flutter和Dart，安装之后重启。

7、运行 flutter doctor

打开一个新的呼吁提醒符或PowerShell窗口并运行以下呼吁以查察是否必要安装任何依靠项来完成安装：

flutter doctor 

这是一个漫长的进程，flutter会检测你的情形，并安装全部的依靠，直至：No issues found！，假若有缺失，会就会再那一项前面打x。你必要逐一办理。

统统停当！

1、启动 VS Code

挪用 View>Command Palette…（快捷键ctrl+shift+p）

输入 ‘flutter’, 然后选择 ‘Flutter: New web Project’

输入 Project 名称 (如flutterweb), 然后按回车键

指定安排项目标位置，然后按蓝色简直定按钮

守候项目建设继承，并表现main.dart文件。到此，一个Demo建设完成。

我们看到了认识的HTML文件以及项目进口文件main.dart。

web目次下的index.html是项目标进口文件。main.dart初始化文件，图片相干资源放在此目次。

lib目次下的main.dart，是主措施代码地址的处所。

每个pub包可能Flutter项目都包括一个pubspec.yaml。它包括与此项目相干的依靠项和元数据。

analysis_options.yaml是设置项目标lint法则。

/dart_tool 是项目打包运行编译天生的文件，页面主措施main.dart.js就在个中。

2、调试Demo，打开呼吁行，进入到项目根目次，执行：

webdev flutterweb 

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!