开发工具IDE

1. webstorm 官网下载，需破解激活或直接下载破解版，功能全且强大，自带git版本管理工具
2. vscode 官网下载
3. sublime text3官网下载

系统环境

开发环境：windows10，nodejs v8.0.0+
生产环境：centos7/8，ubuntu14.04/16.04，nginx v1.12.0+

主流开发前端框架

1. vue 2.x 官网下载v2 / vue 3.x 官网下载v3
2. React 官网下载
3. Angular 官网下载，中文版，不推荐使用Angular，其开发成本与学习难度较高，且Angular不适合单兵作战。
4. Jquery 官网下载

服务端渲染框架

vue ----> nuxt 官网地址
react ----> next 官网地址

前端自动化打包工具

1. webpack 官网地址
2. gulp 官网地址
3. grunt 官网地址

配套UI框架

基于vue pc端

1. Element 饿了么前端团队开发
2. iView 视图更新科技公司开发
3. Ant Design 阿里蚂蚁金服前端团队开发

基于vue移动端H5

1. Vant 有赞前端团队开发
2. NutUi 京东前端团队开发

基于react ui框架

阿里Ant Design系列

微信小程序

1. vant-weapp 官网地址
2. iview-weapp 官网地址
3. weui 微信官方UI，设计风格同微信APP

其他

bootstrap 官网地址，中小项目推荐使用免费开源CDN加速服务，访问地址：https://www.bootcss.com/

基础开发模板框架

开箱即用

1. webpack4 + jquery 多页面开发 github源码下载
2. vue-cli3 + iview github源码下载
3. vue-cli2 + iview github源码下载
4. nuxt + iview github源码下载

CMS后台管理框架

1. vue-element-admin github源码下载，演示地址
2. iview-admin github源码下载，演示地址
3. d2-admin github源码下载，演示地址
4. vue-manage-system github源码下载，演示地址
5. react ant-design pro 官网地址，演示地址

常用js函数库

1. lodashjs https://www.lodashjs.com/
2. rx.js 响应式异步编程库，在vue中需引入vue-rx
3. jquery是一个函数库，一个js文件，页面用script标签引入这个js文件就可以使用。

常用前端插件

1. 工具库函数 js-utils
2. 富文本编辑器 ushare-editor
3. 轮播插件 swiper
4. 可视化图表插件
   echarts
   vcharts
   G2
   D3
   highcharts
5. http请求 axios
6. 图片裁切 cropperjs
7. 前端div转canvas生成图片 html2canvas
8. cookie操作 js-cookie
9. 时间操作 moment
10. 页面加载进度条 nprogress
11. 移动端开发 px转rem或者vw、vh postcss
12. 数字滚动效果 jquery.countup.js vue-count-to
13. 前端加密 crypto-js
14. 代码高亮 highlight.js
15. markdown文本转html marked.js
16. 前端二维码 qrcodejs
17. 防止 xss攻击 js-xss
18. 前端多语言切换 i18n
19. 移动端click点击事件优化 fastclick
20. meta操作 vue-meta
21. js前端签名 jsignature

前端基础动画

1. animate.css
2. animejs

nodejs开发框架

1. express
2. koa
3. egg

版本控制工具

公司内网git：https://git-scm.com/downloads
外网github：https://github.com/

文件/资源命名

在 web 项目中，所有的文件名应该都遵循同一命名约定。

1. 以可读性而言，减号（-）是用来分隔文件名的不二之选。同时它也是常见的 URL 分隔符。
2. 确保文件命名总是以字母开头而不是数字。而以特殊字符开头命名的文件，一般都有特殊的含义与用处。
3. 资源的字母名称必须全为小写，这是因为在某些对大小写字母敏感的操作系统中，当文件通过工具压缩混淆后，或者人为修改过后，大小写不同而导致引用文件不同的错误，很难被发现。
4. 还有一些情况下，需要对文件增加前后缀或特定的扩展名（比如 .min.js, .min.css），抑或一串前缀（比如 5fa89b.main.min.css）。这种情况下，建议使用点分隔符来区分这些在文件名中带有清晰意义的元数据。
5. 避免使用中文名作为文件名。

不推荐

MyScript.js
myCamelCaseName.css
i_love_underscores.html
1008-scripts.js
my-file-min.css
天河.zip

推荐

my-script.js
my-camel-case-name.css
i-love-underscores.html
thousand-and-one-scripts.js
my-file.min.css
tianhe.zip

http/https协议

不要指定引入资源所带的具体协议。

当引入图片或其他媒体文件，还有样式和脚本时，URLs 所指向的具体路径，不要指定协议部分（http:或https:），除非这两者协议都不可用。

不指定协议使得 URL 从绝对的获取路径转变为相对的，在请求资源协议无法确定时非常好用，而且还能为文件大小节省几个字节。

不推荐

<script src="http://cdn.com/foundation.min.js"></script>

推荐

<script src="//cdn.com/foundation.min.js"></script>

不推荐

.example {
  background: url(http://static.example.com/images/bg.jpg);
}

推荐

.example {
  background: url(//static.example.com/images/bg.jpg);
}

文本缩进

一次缩进两个空格（非tap，tap在不同编辑器或者操作系统下解释不一致）。

<ul>
    <li>Fantastic</li>
    <li>Great</li>
    <li>
        <a href="#">Test</a>
    </li>
</ul>

注释

注释是你自己与你的小伙伴们了解代码写法和目的的唯一途径。

特别是在写一些看似琐碎的无关紧要的代码时，由于记忆点不深刻，注释就变得尤为重要了。

代码注释，则是永远也不嫌多。

当你写注释时一定要注意：不要写你的代码都干了些什么，而要写你的代码为什么要这么写，背后的考量是什么。当然也可以加入所思考问题或是解决方案的链接地址。

不推荐

var offset = 0, 
	includeLabels = true;
if (includeLabels) {
  // Add offset of 20
  offset = 20;
}

推荐

var offset = 0, 
	includeLabels = true;
if (includeLabels) {
  /* If the labels are included we need to have a minimum offset of 20 pixels
  We need to set it explicitly because of the following bug: http://somebrowservendor.com/issue-tracker/ISSUE-1*/
  offset = 20;
}

代码检查

对于比较宽松自由的编程语言来说，严格遵循编码规范和格式化风格指南就显得极为重要。遵循规范固然很好，但是有自动化流程来确保其执行情况，岂不更佳。Trust is good, control is better.

对于 JavaScript，建议使用 JSLint 或 JSHint。