一、写在前面
两年前我写过一篇从零开始搭建Vue3项目的文章，最近在工作中一位同事分享了自己的 Vue3+TS的项目模板，考虑的很是全面。这也给我带来了一些启发，需要更新一下自己的知识体系。所以在这里，我想要重新考虑一下当我们需要从零开始搭建一个前端项目时，需要考虑哪些东西？
二、了解前端项目的运行机制
这是一个不太能表达完全内容的标题，我想要表达的是不要困于前端这个小圆圈里面。打开我们的思维，试着从更高更宽的角度来看待我们的工作内容。
首先我们先看看当我们在浏览器里输入一个域名，是如何访问到网站页面的，我画了个粗略的图。
上图中的第四、五块并不一定是Nginx处理的，其余的服务端程序都可以处理，比如Java的Spring框架、Python的Django框架和Node的Express框架。但对于我来说最为熟悉的还是Nginx，它能做的事太多了：静态资源转发、负载均衡、反向代理等等。这块的内容是前端的短板，需要好好的补充一下。
我拿Nginx作为静态资源转发为例，画一下网站访问的模型图，给自己一个整体大概的脉络把控。
脑海里知道了访问网站的大概流程之后，下面我们就要了解前端项目的部署流程了。一些常见的云厂商都提供了持续集成的流水线操作，例如之前用过的阿里云。它允许我们在不同的项目阶段，执行不同的脚本，省去了人工的繁琐。下面就是我司某个项目的托管平台提供的持续集成的设置流程图。
从上图知道我们的前端项目源码只是一个生产线上面的原料，还要经过流水线上的一道道加工步骤才能最终得到一个成熟的产物，能够让全国的用户访问到我们努力工作的页面。说到这里心里突然有一种莫名的成就感，哎。从这个角度来看，我们的工作范围只是整个产业链的普通的一环。更别说还有整个技术的工作链，乃至上一层整个公司业务链。提高我们的思维高度，摒弃心里那若有若无的傲慢感，朝着更宽广的路走。我想这可能才是35岁后我们开发持久发展的一条思路吧。
三、去除知识的迷雾
这一点其实是紧跟着上一点的，在我们了解了整个前端项目的开头（也就是我们的项目源码）和结尾（持续集成的产物）之后，那么我们就需要去掉整个前端开发中弥漫在我们心里的那层迷雾。无论你开发时整的多花里胡哨，最后就是那一份的dist文件夹。（这里只针对前端静态项目哈）。我们要树立起工作和学习战略上的自信，然后在对过程中迷糊的地方进行重点打击👊。这样才能说高效的学习到新的东西，而不是浑浑噩噩的花了时间和精力，得不到任何东西。
四、确定项目选型
项目的选型能够定下整个项目的开发基调，是特别重要的东西。比如我现在接手的公司的老项目是 Vue2 全家桶写的，它没有使用 Eslint 进行代码格式化。所以当我第一次打开项目时，那是一片飘红啊！！另外之前的开发变凉命名是 d，q啥的，根本不知道这个变量是干嘛的。。。。第一次亲身经历网上被人吐槽的事情。
最近需要新启一个项目，负责的同事就召集大家一起开会。会上讨论了使用 Vue3 + TS 的框架，同时确实了团队的 Eslint 格式规范和 git 提交的说明规范。这些在项目选型时的工作能够很大的保证后续的代码质量，毕竟出了bug，到头来还是写代码的去修复。所以在这个阶段，需要集思广益的讨论符合当前团队和业务需求的技术框架，切忌不能闭门造车。
五、常见的操作封装
确定了技术框架之后，下面就需要封装一下常用的操作了。例如http请求封装，常用的工具方法封装，预处理css语言的引入，全局样式，动画处理等等。这些操作的来源一方面是网上好多文章分享，另一方面来源于我们在业务中的积累。
六、结束
蛮久没写博客了，这篇文章更多是我自己的自言自语，把我的混乱中掺杂一些灵感的东西几下来。如果有某一点给看到这篇文章的朋友带来了帮助，那我就很开心了。
