如何设置项目文件夹(互联网产品开发流程)

互联网产品开发流程

互联网公司工作流程非常简单，是由产品经理先提出需求，画出原型图，然后给到设计师画出设计图，然后再由前端开发工程师按照设计图实现产品。当然整个产品的开发上线过程，还需要后端工程师、测试、运维等小伙伴的共同合作才能完成。

原型图是用一些非常简单的线条，简明扼要的描述出这个网页大致的栏目区划和功能，对于具体的样式、颜色等细节并没有做出额外的标注。

设计图则是1:1的呈现网页最终的样式，设计图上已经把所有的图片、字号、距离、版式等都定好了。

而前端开发人员，则能够从原型图或者设计图上，测量出每一个数据，从而编写代码。也就是说，作为前端工程师，代码里面的任何一个数据，都不是由自己拍脑门子决定的，这些数据必须全部都是从原型图或者设计图上测量得到的，即所有的数据都是由产品经理和设计师给出的。

曾经有很长时间，前端工程师要使用ps和fireworks这两个软件，来对设计图进行测量，过程非常繁琐。

而现在，原型图和设计图，是由产品经理和设计师使用Axure和Sketch等软件设计出来的，每一个数据都必须直观标注出来，给到前端开发工程师直接测量使用。

Axure和Sketch这两个软件非常智能，是产品经理和UI设计师必用的专业软件，能够大大提高团队的产品研发效率。

而给到前端工程师的设计图，是一个网页文件，也就是说这个设计图时.html为后缀的文件，它是由Sketch这个软件生成的。

打开这个网页文件形式的设计图，滚动鼠标滚轮，可以上下滚动设计图，点击加号和减号，可以放大和缩小设计图，随便点击一个区域，会弹出具体的尺寸大小数据。

网页上要用到的图片，每种图片都有小中大三个尺寸，这是为了适配不同的屏幕。

对于很多小公司来说，开发团队的组织架构、人员配备都不合理，开发流程也不正规、不专业，在这样的团队，会导致前端工程师包揽了一部分产品经理和设计师的工作，比如说，很多小公司会招平面设计师来代替UI设计师，而且没有专业的产品经理，这样网页或者APP界面上各个区域的尺寸、图片的尺寸、文字的大小等等，全都让前端工程师自己自由发挥，这就让前端工程师不断的在那里反反复复的调数据，边调边看效果。这就导致了前端工程师的工作效率大大降低。同时又让不懂UI的平面设计师沦为了修图的美工。

以上的情况，往往又会造成团队成员之间的沟通成本、配合成本以及一些不必要的摩擦。

这就是除了互联网产业聚集的一线城市之外的小城市的小公司，会普遍存在的问题：非专业出身的管理者，如果业务需要专业能力支撑，他们往往不能合理的组织团队成员、合理的配置资源。当然专业的团队也未必能保证业务的成功，但那是另外一码事。

合适的环境，对一个人的的工作和成长异常重要。不要光闷头搞专业，适当的了解一些关于产品、营销、以及商业的知识。这样也许你也可以实现向上管理，影响管理者，让团队往好的方向走。

创建项目文件夹结构

每一个项目的文件夹结构都包含以下三种名称的文件夹：

网站首页命名

网站首页命名不能为中文，也不能随便起名。

绝大多数服务器默认的网站首页名都为index.html。

只要你把一个网页的名字写为index.html，当你输入网站的网址的时候，服务器就会自动提供这个网页给用户，所以网站首页就要命名为index.html，一定不要命名错了。

那么你要创建一个项目时，可以在桌面或者c盘、d盘等任何一个地方，创建如下的目录结构：

文件目录结构排列成上图这样，有利于开发以及其他的日常工作，因为这种排列方式，从上而下，一目了然，而且会显示文件创建的时间以及类型，当你日后要找某个文件的话，通过时间和文件类型等信息就会更快更方便的找到它。

要实现这样的图标排列，在文件夹中点击”查看–详细信息”即可。

创建好项目的文件夹目录结构之后，可以把这些文件夹都拖拽到vscode里面，或者在vscode中，点击“文件-打开文件夹”，选择刚才创建的项目文件夹，这样就在vscode中打开了项目文件夹。

然后就可以按照这种目录结构进行项目的正式开发了。

感谢阅读！知识总结不易，请点个赞或转发鼓励一下呗！关注我，从零基础入门基本功扎实的前端工程师。