新手小白如何开发练手项目？
作者: 前端AC | 原文: https://juejin.cn/post/7560580887253188650
前言
朱波也是好久没更新了，最近也是在疯狂的实习面试哈，也是拿到4个offer，不过都不怎么喜欢就没去了，最近也是实验室的师弟师妹们刚开始项目，也是有点不懂的地方，所以我想出一个我自己做项目的一个经验，怎么从0-1的搭建好一个项目架构，从产品-UI-开发-测试-部署上线这几个部分来。
我将举例阳江智慧养鸡项目来开始：
1-产品分析
我们前端呢也是需要去学习一些开发以外的东西，毕竟业务为王嘛，但是我们拿到一个练习项目怎么去开始写内容呢？脑子一直想不出来写啥？AI的流行，我们可以借助ai来辅助我们去分析一个产品需要有什么内容，一个好的项目我们需要花很多时间去分析它的内容。
那么我们怎么去借助ai去分析呢？这里我使用GPT去分析，不能翻墙的同学可以使用国内的ai也行。
第一步，我们分析我们的项目，《智慧养鸡》
给出的结果我们来进行分析：
上面就是告诉我们要做多端的项目，比如web项目（浏览器PC端）、还有手机的小程序或者h5、或者手机跨端app项目，大家可以根据自己的技术、业务的范围去定。
这里ai说智慧方面我们可以围绕硬件（传感器）、yolo算法、天气预报（网上有一些api可以去调用的如和风天气）等进行结合，数字孪生鸡舍技术的话结合3d技术如Three.js/Babylon.js/cannon.js去进行开发。
围绕在阳江地理方面，可以结合当地一个地理位置和文化优势，当地特色就是阳江土鸡，需要数据的话可以去当地的养殖场采集数据。或者做一个前台的文化宣传平台如：http://129.204.12.129:9092/
这个是给的一些页面大概设计，根据自己的需求来，如果自己技术不行的就选一些自己可以的，然后没有想法的可以借鉴，不一定跟着来.
这个是给的大概的技术栈，可以借鉴一下。现在我们就清楚我们要写什么内容了，接下来我举例pc端的一个后台或者一个前台展示页面，教大家如何去UI设计页面
2-UI设计
前端不如那些UI设计一样懂页面设计，但是我们可以借助ai软件，市场上有很多ai： 1-扣子：https://space.coze.cn/ 2-bolt：https://bolt.new/ 3-v0：(https://v0.dev/) 4-蓝湖：(https://mastergo.com/files/home)
接下来我举例蓝湖设计我的简单页面：
然后复制到ai页面,顺便选择我们的技术栈，这里我使用vue：
然后就开始生成我们的内容，你可以根据需要去调整，然后就开始设计我们的大概页面，大家就可以把这个原型图扔给我们的ai模型，开始去写代码了哈哈。
3-搭建前端项目
我之前就发过一篇vue的项目搭建，具体可看：从0到1配置vue项目跟git仓库连接！前言 小编心血来潮，想出一集vue的项目配置，包括git和项目环境搭配，如下： - 掘金，里面有教如何创建vue3项目，配置git，配置简单路由。
4-接口文档
在开发过程中，前后端协调会以一个接口文档来统一我们的字段，接口，请求方式等，后端一般会给我们一个接口文档，然后我们前端调接口拿到数据去放到页面上。我们前端也可以使用mock去模拟请求，减少开发周期，不懂的可以看官方文档：Mock.js。测试接口可以使用：postman、aipost，Apifox等。我习惯是使用aipost：
5-部署（宝塔快速部署）
项目完成之后就可以打包部署了，常见指令：npm run build，打包成一个dist文件，然后我们可以选择一个云服务商：腾讯云、阿里云、七牛云等，这里我经常使用的是腾讯云，可以去购买一个轻量型云服务器（新用户有试用期一个月），然后就部署我们的前端项目。
这里我以我的一个无敌服务器（其实一大堆危险）为例，点击三个点…查看应用详情
复制我们的命令，然后点击登录
然后执行：
拿到我们进入宝塔的一个链接，进去之后（选择高级），可能不安全，不管他，然后输入账号密码进去页面：
然后点击文件菜单，把我们的dist文件上传上去。
然后点击网站
来网站这边选择php项目/html项目，添加站点
然后把dist目录路径选对
然后网站名就是我们的ip地址，然后配置我们的nginx，配置好端口/404页面
然后放行我们的防火墙9095端口
然后重启一下nginx
