一行一行执行命令，最后看到Chrome，祝贺你成功了。

step 2

打开Android Studio。

项目名字、描述简单修改一下，next下一步。

修改一下包名，然后Finish，需要等待一会儿。

项目创建成功了。这里就到这，后期博客慢慢介绍每次开发的细节。

Node 项目创建

我们直接打开Flutter项目的Terminal。

mkdir node

mkdir server

cd node/server

进入server目录，现在你的node环境应该也可以了吧，好开始用Express 生成器生成项目。

npm install express-generator -g //安装好了略过

express --view=pug myapp

修改myapp为你自己的项目名。执行完你会看到。

接下来：

cd myapp
npm i
npm start

浏览器试下http://localhost:3000看到如下就ok了。

开始项目关联

step 1

在Flutter项目中执行。

flutter build web

构建web包，最终会在build文件夹下生成web包，web包下就是网站的相关文件。

step 2

copy web包下的文件到node项目的public文件下。

我创建了一个public_flutter_web，为了是以后文件区分，也建议你做一样的操作。

step 3

改造express，因为默认express是展示 views包下的网页的，而且默认不是html实现。将下图中文件全部删除即可。

打开 app.js文件，删除delete标记部分，添加add标记部分：

step 4

保存修改，重新将服务npm start，再打开http://localhost:3000。看到如下：

大功告成，这样就行了吗，nono，对于一个懒惰的人来说，我们要写一些脚本，辅助项目自动构建。

step 5

由于node项目目录太深，在命令行运行也很麻烦，我们写个shell脚本，来帮我搞定。在flutter项目根目录创建bin文件夹，用来放置我们的脚本。

右键New File 命名为 test_start_node.sh，内容如下：

#!/usr/bin/env bash

node node/server/bin/www

也很简单。这个脚本就是辅助我们开启node服务。当然我们还会有flutter项

目构建的一些脚本，自动copy文件到指定目录等等，这些之后慢慢补全哦。

最后

如果你正在寻找 Flutter 的学习资源，下面我整理了一些关于 Flutter的资料，需要的**点击【 Flutter】加入我们的圈子领取资料和我们一起交流学习吧！**我分享给你。这份资料可以帮助新手开始 Flutter 的旅程，也可以帮已经了解过这方面的朋友更进一步。希望能帮到你们。

Flutter知识体系

Flutter进阶学习全套手册

Android对标阿里P7学习视频

BATJ大厂Android高频面试题

Flutter核心学习资料大全

将代码上传至github：

https://github.com/ibaozi-cn/flutter-jetpack

最后的最后

登上你的云服务器，通过git 将项目下载到服务器上，这里我们需要工具辅助我们服务部署。我选择pm2+nginx来将我的服务启动起来。

最后

这里附上上述的技术体系图相关的几十套腾讯、头条、阿里、美团等公司2021年的面试题，把技术点整理成了视频和PDF（实际上比预期多花了不少精力），包含知识脉络 + 诸多细节，由于篇幅有限，这里以图片的形式给大家展示一部分。

相信它会给大家带来很多收获：

当程序员容易，当一个优秀的程序员是需要不断学习的，从初级程序员到高级程序员，从初级架构师到资深架构师，或者走向管理，从技术经理到技术总监，每个阶段都需要掌握不同的能力。早早确定自己的职业方向，才能在工作和能力提升中甩开同龄人。

• 无论你现在水平怎么样一定要 持续学习 没有鸡汤，别人看起来的毫不费力，其实费了很大力，这四个字就是我的建议！！！
• 我希望每一个努力生活的IT工程师，都会得到自己想要的，因为我们很辛苦，我们应得的。

当我们在抱怨环境，抱怨怀才不遇的时候，没有别的原因，一定是你做的还不够好！
《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》，点击传送门，即可获取！
希望每一个努力生活的IT工程师，都会得到自己想要的，因为我们很辛苦，我们应得的。

当我们在抱怨环境，抱怨怀才不遇的时候，没有别的原因，一定是你做的还不够好！
《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》，点击传送门，即可获取！