flutter web(1) 搭建一个web环境、创建项目全解

搭建步骤

1、从 github 上面把 flutter_web 项目克隆到本地

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

存放目录随意,不过建议存放目录跟 flutter sdk 同级,日后更新维护好找

2、安装 flutter_web 的编译工具

webdev

flutter pub global activate webdev

安装过程可能出现如下信息,此为网友在 windows 上配置时出现的

Resolving dependencies …
It looks like pub.dartlang.org is having some trouble
Pub will wait for a while before trying to connect again.
Got socket error trying to find package webdev at https://pub.dartlang.org.
pub finished with exit code 69

此问题我没碰到过,如果出现上诉问题是因为网络问题,建议多尝试几次。

如果出现如下信息,则安装成功

Precompiling executables …
Precompiled webdev:webdev.
Installed executable webdev.
Activated webdev 2.0.6

上述信息中可能有一个 Warning 提示需要配置环境变量,按提示配置环境变量即可

可以尝试执行命令

flutter pub global run webdev

配置全局环境变量

到此环境搭建成功了。

3、创建和启动项目

3.1 使用现有项目

flutter_web 目录下有 examples 几个 demo 项目,比如:hello_world

cd /examples/hello_world

执行

flutter pub upgrade
或
flutter pub get

如果出现

RandyWeideMacBook-Pro:hello_world wei$ 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 packages get" in hello_world...                   21.9s

说明项目配置成功了,然后就是启动本地服务,官方的命令是:webdev serve 实际使用过程中这个命令并不对 需要使用

flutter pub global run webdev serve

出现以下信息就是成功了

RandyWeideMacBook-Pro:hello_world wei$ flutter pub global run webdev serve
[INFO] Building new asset graph completed, took 1.5s
[INFO] Checking for unexpected pre-existing outputs. completed, took 1ms
[INFO] Serving `web` on http://localhost:8080
[INFO] Running build completed, took 18.3s
[INFO] Caching finalized dependency graph completed, took 201ms
[INFO] Succeeded after 18.5s with 556 outputs (3217 actions)
[INFO] ------------------------------------------------------------------------

然后就可以在浏览器使用信息中的地址 http://localhost:8080 访问到了。

3.2 创建新项目

官方给两种途径创建新项目 1 )使用 Visual Studio Code,具体配置 Flutter Dart 插件就不多说。使用命令面板 Flutter: New Web Project,就可以创建一个新项目了,等配置完成后,按 F5 或者 Debug -> Start Debugging,就可以启动服务并自动打开浏览器。

2 )使用 IntelliJ,没有研究

3 )使用 Android Studio,因为本身我是开发安卓的,习惯使用 Studio 进行开发。然而 studio 并不能创建一个普通的 dart 项目,或者 flutter web 项目,相信后期官方一定是能支持的。

目前想使用 studio 写代码的,可以使用 Visual Studio Code,创建完项目完之后,再用 Android Studio 打开项目,也是可以的。

不过对于没有安装 Visual Studio Code 的同学来说的话,还可以用命令行来创建项目。

命令行创建 web 项目需要安装另一个工具

flutter pub global activate stagehand

跟安装 webdev 一样 安装成功后可以执行下面命令查看帮助

flutter pub global run stagehand

Stagehand will generate the given application type into the current directory.
usage: stagehand 
    --[no-]analytics    Opt out of anonymous usage and crash reporting.
-h, --help              Help!
    --version           Display the version for stagehand.
    --author            The author name to use for file headers.
                        (defaults to "")

Available generators:
  console-full        - A command-line application sample.
  flutter-web-preview - A simple Flutter Web app.
  package-simple      - A starting point for Dart libraries or applications.
  server-shelf        - A web server built using the shelf package.
  web-angular         - A web app with material design components.
  web-simple          - A web app that uses only core Dart libraries.
  web-stagexl         - A starting point for 2D animation and games.

可以看到这个工具可以按照 7 种模版创建项目,我们使用的是 flutter-web-preview,其他模版有兴趣的可以自行研究。

创建一个项目目录,然后

cd 目录

执行命令

flutter pub global run stagehand flutter-web-preview

一个 web 项目就创建完成了,可以使用 studio 打开项目,使用flutter pub get配置好完之后,可以进行正常的代码了。

总结 : 目前为止 vscode 最好用,一步创建,随意配置。

你可能感兴趣的:(flutter web(1) 搭建一个web环境、创建项目全解)