序言
- 18天完成 某中台客服+后台系统 的开发到上线
- 21天完成 某数据标准化系统 的开发到提测
- 1个月完成 某数据处理系统 的开发到上线
- 1个月完成 某银行押品可视化系统 的开发到上线
以上时间都是总时，非工时。从需求评审开始计时，到提测或者上线。除第一个是敏捷开发模式，其他都是常规开发。页面都不多，但都是五脏俱全。
过去的一年半完成的一些高强度项目开发，除了收获如何花式加班，更多的还是如何提高开发效率。
文章部分习惯指向 Mac电脑 + WebStorm编码器 + 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为例
右键任意项目文件 --> New --> Edit File Templates：
在这里我们可以添加自己的文件模板，在创建新的页面文件时可以节省非常多的时间。
常用代码模板
打开编码器设置 --> Editor --> Live Templates：
在右侧栏中选择任意一个合适的类，在点击右侧侧边“+”即可添加自己的代码模板。
在Abbreviation中输入触发代码块的指定，Description中输入指令描述,以简单的console.log()为例：
编辑完成后点击Define，选择生效的文件，然后点击Apply即完成了一个代码模板的编辑。这样在你选择的生效文件中就可以用 代码指令 + tab的方式来快捷输入你的代码模板。
效果如下：
不管你使用的是哪个编辑器，一定要学会使用自定义代码模块，这可以极大的提高你的开发效率！！
常用快捷
只列举一些开发时使用频率非常高的快捷。
⌘command；⇧shift；⌥option
- chrome快捷键：
⌘ + T ：快速打开一个新的浏览器窗口
⌘ + W ：关闭当前浏览器窗口
⌘ + E ：打开开发者工具(通过电脑设置自定义的)
- webstorm快捷键：
⌘ + W ：快速关闭当前编辑文件
⌘ + delete：删除光标所在行整行(非常实用)
⌘ + D：快速复制当前行，或者选中的多行，在下一行插入(非常实用)
⌘ + return：与直接使用换行相比，该方式光标位置不变
⇧ + return: 不管光标在当前行什么位置，下行插入空行，并将光标切过去(非常实用)。
⌘ (+ ⇧) + F：当前文件内(全局)搜索
⌘ (+ ⇧) + G：匹配下(上)一个搜索
⌘ (+ ⇧) + R：当前文件内(全局)替换
⌘ + ⇧ + O：按文件名查找
⌘ + ⌥ + L： 文件格式化(点击项目文件夹，可以对整个文件夹内格式化)
⌘ + L：定位到对应的行列
⌘ (+ ⇧) + Z：(反)撤销
⌘ + ⇧ + V：唤出粘贴板，可从栈中选择历史的复制内容粘贴
⌘ + ⇧ + C：复制文件路径(点击项目目录可以复制对应路径)
命令行输入： open .(空格与点都属于指令，可快速打开命令行当前位置文件)
- 编辑器npm功能：
编辑器可以让我们在编辑器的npm模块中直接运行package中保存的脚本，从这里运行相比自行输入指令运行来说，可以更方便的重启停止脚本。同时我们可以考虑添加自动打包压缩指令，甚至代码提交指令等。
积累篇
项目
- axios:包括请求、响应拦截配置，qs对数据处理，常见状态码返回提示信息处理等。
- ui组件:根据项目需求对ui组件进行二次组件化封装。
- css:一套自己习惯的less/sass公共方法封装，一套公用的reset方法(重置原始样式)。
- store:一套自己习惯的状态管理器骨架，保证项目启动后只需要添加数据。
- router:路由再封装，包括循环添加路由，路由拦截等的处理
- image:svg图标或者字体图标库的引入
- components:通用的项目组件
- tools:通用的项目工具，以及自己积累的好用得js函数
这些不做详细介绍，网上会有很完善的方案。除最后三项都可以添加到你的中。其中最后两项建议分别单独开项目来积累。
其他
给自己的浏览器配置一个常用工具类的书签文件夹(用来保存一些实用或常用到的网上工具)：
- TinyPNG(图片压缩)
- 草料二维码(二维码生成)
- BEJSON(JSON在线格式化)
- 微信公众平台
- 地图选择器(地图拾点)
- echarts社区
...
推荐两款能提高效率的mac软件(自行找合适的地址下载)：
- CheatSheet(可长按⌘查看当前使用软件的快捷)
- BetterTouchTool(可以添加各种触控板命令)
数据篇
快速复制接口数据
浏览器打开Network，选择你要获取数据的接口，右键点击'Store as global variable'
切换到Console，可以看到生成了一个temp1变量(数字会根据你复制次数递增)，控制台输入copy(temp1)后就已经把需要的数据添加到了剪切板，使用粘贴功能即可复制需要的数据。
数据处理
适当刷刷前端的题库( 力扣 )，提升自己的数据处理能力。
mock数据
紧急项目开发，前端页面一定走在后端接口的前面，所以预留接口联调就成了必然，怎么保证后续联调花费最少的时间呢？mock数据值得拥有。
配置一套你自己的mock引入方案，然后可以加入到你的中，添加项目mock启动环境。
- 安装
yarn add mockjs -D
- 引入
添加mock目录，并在入口判断是否mock环境来引入mockjs，其中@sys是自定义路劲别名。
- mock配置
像下面这样，我们就可以对'common/login'的请求进行拦截，并返回我们自定义的mock虚拟数据
- api配置
像这样配置的话，我们自己开发页面配置好了mock数据，联调的时候只需要把后端接口链接添加到realUrl，然后在数据处理中做对应的映射处理就完成了联调。
- api统一抛出
api建议做一个统一的抛出，这样引入的时候就会非常方便，当然我这里目录文件与抛出的api变量名没有对应起来，没有做到位，应该要调整，这样找接口的时候可以直接定位对应的文件夹。
尾言
好的习惯刚开始可能会不适应，但是养成后，带来的收益却是非常可观的。
- 习惯使用模板开发
- 习惯使用快捷方式
- 习惯积累实用工具
本文转载自网络，原文链接：https://juejin.cn/post/6920484133978259463?utm_source=tuicool&utm_medium=referral
相关文章
精彩导读
热门资讯