Flutter 建立个人网站的一个过程

无需加好友免费技术支持

据媒体报道，在国际范围内严格遵守封城对策，推动远程控制学习和工作猛增后，全世界个人计算机（PC）2020年第一季度要求飙涨。但是，这一场困境也造成了生产物流难题比较严重耽误，进而导致全世界PC销售量同比减少8%，苹果公司Mac也是狂跌21%。

本文来自我校领导贡献，分享它的对用Flutter 建立个人网站的一个过程或许能够对大家有所帮助！与此同时，我也感谢创作者的优秀文章。

i校领导博客详细地址：

时至今日，您有搭建个人网站的想法吗？我第一次开始写博客的时候也有了这样的想法，可是直至见到才搭起来。flutter拥有web适用，我就是在想，现在是时候，一定要做，因此我设立了现今网址ibaozi.cn，代码开源至

这一次，我想要做的并不是根据这一网站的开发。又提交了一个最新域名jetpack.net.cn，或许直至我读了以前的博客，我才慢慢做了一个Android Jetpack模版项目在线制作专用工具，我办理这一就是为了Android Jetpack融合，提供一个非常容易记得的网站域名。

自然，我还有另一个方案，那便是做一个Flutter 的生态Jetpack，这一博客是方案的第一步，彻底开源系统来给大家，让读我博客的同学和我一起建设网站，顺带学习培训Flutter技术性，好啦我就不多说了。下面，让我们一起看看怎样创建这个网站。

Flutter

必须转换beta版本来支撑web开发。环境建设跳至博客前：Flutter系列之环境搭建。

Node

下载弹跳：下载| Node.js。

环境配置：Node.js 组装配备。

钢管脚手架：Express 制作器。

实际操作流程请看下去。

装作你就已经设立了自然环境。

step 1

打开终端设备，转换Flutter 支系。

一行一行运行命令，最终见到Chrome，祝贺你取得成功。

step 2

打开Android Studio。

简易改动项目名称及叙述，next下一步。

随后改动包名Finish，等一会儿。

项目取得成功建立。这便是中后期博客渐渐地详细介绍每一次开发设计的小细节。

大家立即打开Flutter项目的Terminal。

进到server文件目录，你现在的node环境应当还能够。广泛使用非常容易。Express 制作器形成项目。

改动myapp为自己项目名。实行后你可以看到的。

下面：

电脑浏览器试一下如下所示ok了。

step 1

在Flutter执行项目。

搭建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，再打开以下几点：

做好了，那样就行了吗，nono，针对懒惰，我们要写一些脚本，自动构建协助项目。

step 5

因为node项目文件目录过深，指令实际操作也太麻烦了。使我们写一个shell来给我解决脚本。flutter建立项目网站根目录bin把我们的脚本放到文件夹里。

鼠标右键New File 被命名为 test_start_node.sh，具体内容如下所示：

很简单。这一脚本就是为了帮我们打开它。node服务。flutter项

自动构建的一些脚本copy文件在指定文件目录等，再慢慢填补。

我已收拾好了材料。我们需要私聊。【Flutter】我与你分享！

Flutter优选面试问题

Flutter实战演练大中型项目

Flutter关键学习培训资料大全

提交编码github：

走上你云主机，根据git 将项目下载到服务器上，这儿我们应该专用工具协助大家服务项目布署。我选择pm2 nginx逐渐我的服务。

这里不详尽讲了。网上流传一片大海，需要你去浪。假如你有问题，我能够帮助你。最终根据pm2 和 nginx ，项目运作健全。的，你所看到的是jetpack.ibaozi.cn，嘿嘿，网站域名还没有出来，首先用以前的cbaozi.cn，大家之后搬至jetpack.net.cn。