前言18天完成开发一个中端客服+后台系统上线21天完成开发某数据标准化系统测试1个月完成某数据处理系统开发上线1个月某银行押品可视化系统开发完成至上线的时间为总时数，不是工时。时间从需求审查开始到测试或启动。除了第一种是敏捷开发模式外，其他都是常规开发。页数不多，但都很完整。一年半来完成的一些高强度项目的开发，除了收获如何加班，更多的是如何提高开发效率。部分文章成语指向Mac电脑+WebStormcoder+vue，但成语是通用的。项目起步篇从已经参与的项目中提取共性部分，积累属于自己的项目模板。当然，很多公司都有自己专属的项目模板或者专属的架构师，但这并不妨碍我们积累自己的项目模板。有了自己的项目模板，当我们开始一个新的项目时，我们就不用花太多的时间在项目启动上了。但是对于任何一个项目来说，架构部分都是非常重要的。一个好的项目架构可以大大提高后期的开发效率，同时对产品的体验和性能有着决定性的影响。模板搭建的基本流程：使用熟悉的框架（vue、react、angular）搭建一个基础模板，并介绍围绕框架的基本配置（以vue为例：vuex、vue-router）介绍ui框架（element-ui)适配框架和客服,ant-design,mint-ui...)配置习惯es/ts配置习惯和良好的目录配置介绍常用插件(axios,lodash,less,sass,qs,vuex-persistedstate,mockjs...）常用通用功能介绍webpack优化配置等配置自动化测试（没做过...）具体项目过程就不详细说了（会有一些介绍），我是还不够好。当然你也可以在网上找到合适的模板，模板需要不断的优化和积累。将模板保存在自己的git库中，需要时随时调用。下面是使用模板打开新项目的方法：以常用的文件模板webstorm为例在编辑部分，右键任意项目文件-->新建-->编辑文件模板：这里我们可以添加我们自己的文件模板和创建一个新的页面文件可以节省很多时间。常用代码模板打开编码器设置-->编辑器-->LiveTemplates：在右侧栏中选择任意合适的类，点击右侧的“+”即可添加自己的代码模板。在Abbreviation中输入触发代码块的名称，在Description中输入指令描述。以简单的console.log()为例：编辑完成后点击Define，选择有效文件，点击Apply即可完成代码模板的编辑。这样你就可以使用代码命令+tab的方式在你选择的有效文件中快速输入你的代码模板。效果如下：无论你使用哪种编辑器，都要学会使用自定义代码模块，可以大大提高你的开发效率！！常用快捷键只列出一些在开发中使用频率很高的快捷键。?命令；?转变;?optionchrome快捷键：?+T：快速打开新浏览器窗口?+W：关闭当前浏览器窗口?+E：打开开发者工具（通过电脑设置自定义）webstorm快捷键：?+W：快速关闭当前编辑文件?+delete：删除光标所在的整行（很有用）?+D：快速复制当前行，或者选中多行，插入到下一行（非常有用）?+return：与直接使用换行相比，该方法光标位置不变?+return：无论光标在当前行的什么位置，都在下一行插入一个空行，将光标剪切过去（很实用）。?(+?)+F：在当前文件中搜索（全局）?(+?)+G：匹配下一个（向上）搜索?(+?)+R：在当前文件中替换（全局）?+?+O：按文件名查找?+?+L：文件格式化（点击项目文件夹可格式化整个文件夹）?+L：定位到对应的行列?(+?)+Z：（反向）撤消?+?+V：调出粘贴板，可以从栈中选择过去复制的内容粘贴?+?+C：复制文件路径（点击项目目录复制对应路径）命令行输入：打开。（空格和点都属于命令，可以快速打开命令行当前位置文件）编辑器npm功能：编辑器可以让我们在编辑器的npm模块中直接运行打包保存的脚本比起从这里输入命令运行，可以运行更方便的重启停止脚本。同时可以考虑加入自动打包压缩指令，甚至代码提交指令。积累项目axios：包括请求响应拦截配置，qs数据处理，常见状态码返回提示信息处理等。UI组件：根据项目需求，将UI组件封装为二级组件。css：一套自己习惯的less/sass公共方法封装，一套公共reset方法（重置原来的样式）。store：一套自己习惯的statemanagerskeleton，保证项目启动后只需要添加数据。router：路由重封装，包括循环添加路由，路由拦截等。image：引入svg图标或字体图标库components：通用项目组件tools：通用项目工具，以及自己积累的好用的js函数。做一个详细的介绍，网上会有很完整的方案。除了最后三个之外的所有都可以添加到你的。其中，最后两条建议是单独开项目积累。Others为浏览器配置一个常用工具书签文件夹（用来保存一些实用或常用的在线工具）：TinyPNG（图片压缩）GrassQRcode（二维码生成）BEJSON（JSON在线格式）微信公众平台地图选择器（地图选择器）-up点）echarts社区...推荐两款mac可以提高效率的软件（自己找合适的地址下载）：CheatSheet（可以长按?查看当前使用软件的快捷方式）BetterTouchTool（可以添加各种触摸板命令）数据篇快速复制界面数据浏览器打开网络，选择你要获取数据的界面，右键'Storeasglobalvariable'切换到Console，可以看到有一个temp1变量（数字会根据你的份数），在控制台输入copy(temp1)后，需要的数据已经添加到剪贴板，需要的数据可以使用粘贴功能复制。数据处理适当刷一下前端题库（力口），提升自己的数据处理能力。mock数据应急项目开发，前端页面必须在后台界面前面，预留联调界面是必然的。如何保证后续的联调耗时最少？模拟数据值得拥有。配置一套自己的mock引入方案，然后就可以添加到你的项目mock启动环境中了。installyarnaddmockjs-D导入添加mock目录，入口处判断是否使用mock环境导入mockjs，其中@sys为自定义路由的别名。如果mock配置如下，我们可以拦截'common/login'请求并返回我们自定义的mock虚拟数据api配置。如果api配置是这样配置的，我们就已经开发了页面，配置了mock数据。联调时只需要将后端接口链接添加到realUrl，然后在数据处理中做相应的映射处理即可完成联调。api统一抛出api做一个统一的抛出，这样引入的时候会很方便。当然这里的目录文件与抛出的api变量名不对应，也没有做好。应该调整它，以便可以找到该接口。您可以直接找到相应的文件夹。好习惯一开始可能用不上，但是养成之后，带来的好处是非常可观的。习惯模板开发习惯使用快捷方式习惯积累实用工具
