Flutter学习笔记一——安装及初体验

前段时间,google在2018世界移动大会上发布了Flutter的beta版本,Flutter是一个跨平台开发框架,兼容了iOS及Android,底层语言采用Dart。
在听闻Flutter的渲染基础是自己实现的,在性能上可能更优于RN的时候,不禁对它产生了兴趣,接下来是我的初步安装及简单编译的体验。

环境及准备工作

我用的是mac系统,所以接下来基本以Mac环境为准。
xcode9.0+
Visual Studio Code
需要的依赖:bash,mkdir,rm,git,curl,unzip,which其中不少Mac可能已经安装过,并不需要重复安装了

安装

首先,从克隆项目

git clone -b master https://github.com/flutter/flutter.git

克隆完成后添加临时路径,可以执行flutter命令,路径根据自己的下载地址,因为我是下载到用户目录下的,所以用的 ~

export PATH=~/flutter/bin:$PATH

查看依赖

flutter doctor

查看输出日志


Flutter学习笔记一——安装及初体验_第1张图片
62E5C19B-6A51-48AC-B7FB-B64929F2C387.png

这里有的部分依赖是可以不必安装的,这里因为目前我只考虑在iOS模拟器上跑,用VSCode作IDE,所以,IntelliJ IDE和Android Studio都没有处理。


Flutter学习笔记一——安装及初体验_第2张图片
4D4D85A1-B8B6-4D3E-A724-B37C3DA21015.png

体验

VSCode安装Flutter插件,快捷键cmd+shift+p

E9BE08E8-6BFA-462F-B05B-E063411F32B1.png

创建项目并取名字

这里如果是iOS的项目,需要先用xcode编译之后,再用VSCode
D1000F61-B1F0-44C0-8F1F-CA0A8E636906.png

就可以进行启动了

之后我们可以一直在VSCode上修改代码,保存后模拟器的内容会动态变化,不过因为是beta阶段,有时候可能无法完成这一工作,我们只需要重新启动调试即可。


Flutter学习笔记一——安装及初体验_第3张图片
图片.png

更新永久路径,可在任何终端窗口使用使用flutter命令。
1.打开~目录下的.bash_profile文件。
2.增加以下条目:

export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
export PATH_TO_FLUTTER_GIT_DIRECTORY=/Users/guolei/flutter
export PATH=${PATH}:${PATH_TO_FLUTTER_GIT_DIRECTORY}/bin

其中PATH_TO_FLUTTER_GIT_DIRECTORY为flutter的所在的路径
3.添加完成后执行命令:source ~/.bash_profile

以上如无意外便基本流程完成了。

更新Studio For Mac配置流程:

要求:Studio3.0+
1.启动Studio,点击Configure选择Plugins

Flutter学习笔记一——安装及初体验_第4张图片
image.png

2.点击 Browse Repositories
Flutter学习笔记一——安装及初体验_第5张图片
image.png

3.搜索Flutter与Dart插件并安装
Flutter学习笔记一——安装及初体验_第6张图片
image.png

4.重启Studio

你可能感兴趣的:(Flutter学习笔记一——安装及初体验)