一入前端深似海，深深体会到什么叫学无止境，这可比学生时代深刻得多了，对新技术的渴望是我们前进的不竭动力。入行前端以来也做了几个项目，印象笔记里满满的都是”那些年“学的新东西和”那些年“踩过的坑。学了很多很杂但未分类整理，没有一个清晰的知识框架体系，是时候把它们总结总结搬到博客上来，养成写博客的习惯。本篇是对项目历程的回顾，后面会分篇章总结各部分知识点。爱得多深就能走的是多远，走你~
在啃完W3cshool 高程，从HTML到Jqury，做了一些静态页面和相关小demo。在对前端整个基础知识有一个大概了解后就开始有了做项目的想法。当然这并不是说就到了出成果的时候，只是看了那么多的文档和书籍，发现很多知识看是看了，表面上像是理解了，但并不知道在实际项目中是如何去运用的，再回头时也忘的差不多了。甚至有一些知识，不在实际项目中运用 踩坑根本不能理解它们的精髓，比如面向对象的思想 原型链，看文档的时候实在是一头雾水，都是后来在项目中逐渐理解，形成这样的思想。最开始找项目有几个要求，一是贴近实际工作，可以通过它了解到前端实际工作的整个流程，对前端实际工作流程有一个总体的了解；二最好是电商前后台，觉得这是前端很普遍的场景，必须有所了解。最终便找到了慕课网的 从零开始打造一个企业级电商平台，现在想想当初的决定还是比较合适的。
先来看看这个项目 包括用户端和后台管理系统，前者专注原生JS和Jqury，可了解电商网站从设计到上线整个流程；后者采用React16 + React-Router4结合yarn、webpack、ES6和Sass、Bootstrap等技术，体验前开发端新技术。刚开始看到这样的项目时候还是很兴奋的，第一步项目需求分析，初步了解项目需要实现的功能，是否有技术难点 随后依据需求分析 项目特点 应用场景等进行技术选型，选择合适的技术，其中涉及到前后端分离 分层模块化等架构分析，后面会开篇一一讲解，在这就不赘述了。由于不是真实项目，这两部分仅作了解，当初都感觉挺新鲜的。但随后开始搭建开发环境就让把我折磨的体无完肤，作为一个一只脚还没迈入前端大门的萌新一上手就要接触完全陌生的后端，实在是心有余而力不足。
难道我想错了，不该眼高手低选择这样的一个项目？非也，这个项目本来就是抱着学习的心态来做，一方面巩固文档所学知识，另一方面学习必须的但尚未学的新知识，其中对于新知识并不要求完全掌握而是有所了解，因为这只是第一个项目，熟能生巧，多做几个后掌握是迟早的事。搭建开发环境是前后端分离工作方式必须的第一步，不然开发工作都无法开始就夭折了。搭建和开发环境我们需要做什么呢？安装环境nodejs，这是npm webpack等工具所依赖的，我们想使用它们帮助我们开发必须安装；安装包管理工具npm，传统开发中，代码都得自己敲，不然就是copy修改，而如今模块化开发每个人都可以根据工作经验抽象开发出常用的组件 造轮子 形成一个个"包"，其他项目需要使用的时候就可以直接通过commonjs模块化引入，大大减少了我们的重复工作；没完，接着安装代码版本管理工具git，这是个好东西，它勤勤恳恳地记录我们修改代码的每一步，方便地切分支开发，再也不用看到目录里面诸如xxx毕业论文1.0版/2.0版/3.0版...n.0版/最终版的文件了。搜索资料 教程跟着一步步地做，掉进一个个坑，再爬出来，现在看来轻而易举的事在当时都是难于登天，只因为陌生。这也仅仅是搭建环境，安装了软件，想要熟练使用则得在项目中慢慢磨练了TnT.
上面安装了各种软件，然而还没完 别高兴的太早，接下来准备项目初始化，创建项目，设计项目目录，然后搭建脚手架。脚手架是啥，好吃吗?不好吃！！好难过！！！所谓脚手架，包括了整个开发环境 工具，它集成了很多开发效率工具，当我们的项目越来越复杂之后，他就变得非常的有帮助，有了它们我们写完代码之后只要输入一个命令就可以自动安装依赖 组件 抑或自动完成项目的打包工作，由“程序员手写代码”跨越到了“程序员指挥机器自动生成代码”的时代。有了脚手架，你就可以方便地直接开始做开发，专注你的业务，其他的你就可以命令脚手架去做了。我们可以使用现成的脚手架，也可以自己根据需要配置一个脚手架。接下来是脚手架关键的一个工具，既然选择模块化开发，一个项目分成了一个个文件，我们需要有一个工具帮我们把不同模块按需打包生成最终的完整项目，webpack就是这样一个帮助我们构建项目的工具。所谓项目构建工具，它帮我们把一个个开发的文件按一定的规则打包到一个目标文件，而这个规则就有需要我们通过一个配置文件告诉webpack----"webpack.conf.js",在里面我们按照它的定义规则配置了我们项目的入口 出口，对脚本/样式/html的打包处理方式 打包结果目录设置等。为提高开发效率我们安装了那么多的依赖包，总得有一个文件记录它们的版本，就是“package.json”，此外它还可以定义我们的命令。
脚手架搭建完了，我们终于可以开始业务开发了。第一步是什么呢？埋头写业务代码？nonono,开发要注意效率，提高效率的关键之一就是避免重复工作，所以我们第一步得对业务功能进行分析，提取出通用得功能模块并完成通用模块的开发，掌握代码的高复用技巧。首先是通用JS工具得开发，比如网络数据请求功能/获取服务端接口url、参数功能/hogan 渲染html模板功能/手机号验证，邮箱格式验证，非空验证功能；其次是通用布局/样式及通用hesder/footer/resulet页面等。通用模块开发完成之后我们就可以正式开始业务得开发了，用户->商品 -> 购物车 -> 订单 -> 支付 这部分内容比较多，后面会挑选主要的开篇讲解，这里就先把整个流程讲完。
业务模块开发完成后，我们就要开始上线前的附加工作，包括 生产环境适配，访问数据统计（知道活的怎么样），基本SEO优化（想活的更好）等。生产环境适配，利用webpack添加favicon，线上域名分离，HTML路径简化，添加dns-prefecth，对线上打包结果进行回归测试，防止压缩后显示不一致，用到charles或者fiddler代理模拟测试。基本SEO，增加页面数量，减少页面层级，关键词密度，高质量友链，分析竞对，SEO数据监控等。
最后就是项目上线，对于前端新人，所有与后端相关的都是一座大山，除非你是后端转前端+ +。想要上线，首先你得有域名和服务器把，开始了解到域名是需要备案的，后来知道跟域名没有关系的。只要是国内的服务器，都需要备案，备案是联系服务器商进行备案的。如果你的服务器是国外的，无论哪里注册的域名，都不需要备案。然后百度一下服务器，看到阿里云免费体验一个月，就入手了，至于域名的话在GoDaddy买了发现备案需要复杂的手续和周期，就决定暂时裸IP了，毕竟只是个人学习所用。
域名 服务器解决了，就要开始搭建服务器了，又是一场恶战TnT 。购买的服务器是阿里云centos 7，陌生的linux系统，好在一直在windows上使用git bash，多少对基本命令有些了解，找资料把linux基础知识过了一遍，开始搭建服务器。首先还是要搭建服务器环境，因为源码还是要在这里打包生成发布代码的，linux上安装nodejs npm/yarn git等工具，第一次装都会有一个个坑，慢慢踩吧，踩多了就有套路了。环境搭好了那怎么上线呢？我们在开发时搭建的脚手架，配置了打包命令将我们的文件资源打包成用于上线得dist目录，这和dev环境下的不同，是经过压缩的，这样浏览器请求页面资源时候更加快速。最简单的，打包之前的源码包括html文件和对应的js css，打包后 dist文件html文件会加上js css等静态资源的链接，这样一个页面就形成了，多页应用的话就有多个这样的文件，当然这是最简单情况，还有css单独打包 url 图片处理 common部分抽离什么的后面详聊。那既然dist文件包括了所有页面资源我们上线就是从git上拉取源码打包出dist文件放到服务器上就完事 可以访问了吗？肯定不是的。首先会不断更新迭代，不可能每次出现bug我们手动拉取代码手动打包，那多没效率啊，一切机器能代劳的何乐而不为之呢，所以需要用shell编写自动发布脚本；其次作为前端项目，没有后端参与数据可能是自己做的假数据，也可能是调用线上真实数据接口项目，不管怎样都需要我们对数据接口进行处理，用nginx反向代理；随后进行域名解析便可以欣赏自己的作品了~
一口气把第一个项目的用户端大概流程写完了，回头看看想到啥就写啥，措辞有点乱，哈哈~后面还做了后台的react项目和三个veu项目，详细可见git，和前台由于有兼容性要求选型比较保守使用了原生js和jq不同，后台没有兼容性的顾虑，作为天然的前端试验场，肯定的好好把握机会大干一场，react react-router ES6 scss bootstrap什么的该来的都来吧，另外有现成的脚手架没有用上，还是沿用用户端的脚手架修改配置也挺好的，复习了一波。作为数据驱动视图 视图反馈数据的MVVM框架，我们只需要关注业务开发，改变数据，不用再频繁地去操纵DOM，还引入jsx语言，将html与js结合起来，使模板编写更加灵活。大大的提高了我们的开发效率，用户端开发一个月的话，后台不到两周即可完成。但是由于这个后台项目相对简单，感觉react博大精深，尚未体会到它的精髓，往后再战。
后面便开始了Vue的征途，轻便灵活，果然名不虚传。vue-cli脚手架分分钟帮你搭建开发环境，没了之前项目被折磨的阴影，不过对于新人还是的自己搭建一回脚手架，毕竟项目中还是会需要修改配置，有了之前搭建脚手架的经验，vue-cli这么复杂的脚手架环境上手也轻松许多，所以多学点还是错不了滴~vue有自己的特色的.vue文件，组件化开发更加深入 灵活。Veu还体贴地为我们包装了无数的语法糖，让开发更加便捷。还有种学了一门新的精简版MVVM JS的感觉 = =. 数据驱动和组件化开发体现的淋漓精致。
既喜欢vue的轻便灵活，又对react的贴近原生颇有好感，以vue的学习为跳板，以后一定要对react更深入的学习！学海无涯，爱得多深就能走得多远~
最后github地址，可查看demo，日后开篇记录业务部分开发~