工欲善其事必先利其器之前端篇

开发工具

• Webstorm

Webstorm是jetbrains公司旗下一款JavaScript 开发工具。智能的代码补全、格式化、联想查询、代码调试等都被誉为最智能的JavaScriptIDE。支持JavaScript重构、JavaScript单元测试、代码检测和快速修复、JSLint/JSHint、基于 Mozilla的JavaScript调试器。但是正式版需要收费，可以破解网上很多。

下载地址

 

• Visual Studio Code

Visual Studio Code是一个轻量级但功能强大的源代码编辑器，可以在桌面上运行，适用于Windows、macOS和Linux。它内置了对JavaScript、TypeScript和Node的支持。它拥有丰富的生态系统，可以扩展到其他语言(如c++、c#、Java、Python、PHP、Go)和运行时(如. net和Unity)。

下载地址

 

• Sublime Text

Sublime Text是一个代码编辑器。也是HTML和散文先进的文本编辑器。Sublime Text 3漂亮的用户界面和非凡的功能，例如：迷你地图，多选择，Python插件，代码段等等。完全可自定义键绑定，菜单和工具栏等等.漂亮的用户界面和非凡的功能，Sublime Text的主要功能包括：拼写检查，书签，完整的 Python API ， Goto 功能，即时项目切换，多选择，多窗口等等。

下载地址

 

• HBuilder

快，是HBuilder的最大优势，通过完整的语法提示和代码输入法、代码块等，大幅提升HTML、js、css的开发效率。

下载地址

 

• MarkMan

高效的设计稿标注、测量工具。包括长度标记、坐标和矩形标记、色值标记、文字标记等。支持多种图片格式、设计稿自动刷新、定制标记样式、支持Retina@2X图。

下载地址

 

• PxCook

高效易用的自动标注工具, 生成前端代码, 设计研发协作利器。可以根据设计图智能生成前端代码。

下载地址

 

• ColorPix

是一款非常好用的屏幕取色工具软件，可以直接截取电脑屏幕页面上的颜色，还可以将取色部分进行像素放大，可以看得更加的清楚。直接打开就可以吸。

下载地址

 

• Koala

koala是一个前端预处理器语言图形编译工具，支持Less、Sass、Compass、CoffeeScript，帮助web开发者更高效地使用它们进行开发。跨平台运行，完美兼容windows、linux、mac。

下载地址

 

开发框架

• Vue.js

vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及Vue 提供了 Vue-cli 脚手架，能让你非常容易地构建项目，包含了 Webpack，Browserify，甚至 no build system各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。vue使用 Virtual DOM、提供了响应式和组件化的视图组件。将注意力集中保持在核心库，而将其他功能如路由和全局状态管理交给相关的库。Vue 的路由库和状态管理库都是由官方维护支持且与核心库同步更新的。Vue 和 Weex 会进行官方合作，Weex 是阿里巴巴发起的跨平台用户界面开发框架，同时也正在 Apache 基金会进行项目孵化，Weex 允许你使用 Vue 语法开发不仅仅可以运行在浏览器端，还能被用于开发 iOS 和 Android 上的原生应用的组件。

官方文档

 

• React.js

React 可以非常轻松地创建用户交互界面。为你应用的每一个状态设计简洁的视图，在数据改变时 React 也可以高效地更新渲染界面。以声明式编写UI，可以让你的代码更加可靠，且方便调试。创建好拥有各自状态的组件，再由组件构成更加复杂的界面。React 组件使用一个名为 render() 的方法， 接收数据作为输入，输出页面中对应展示的内容。 下面这个示例中类似XML的写法被称为JSX. 输入的数据通过 this.props 传入 render() 方法无需再用模版代码，通过使用JavaScript编写的组件你可以更好地传递数据，将应用状态和DOM拆分开来。一次学习，随处编写无论你现在正在使用什么技术栈，你都可以随时引入 React 开发新特性。

React也可以用作开发原生应用的框架React Native.React Native使你只使用JavaScript也能编写原生移动应用。 它在设计原理上和React一致，通过声明式的组件机制来搭建丰富多彩的用户界面。React Native产出的并不是“网页应用”， 或者说“HTML5应用”，又或者“混合应用”。 最终产品是一个真正的移动应用，从使用感受上和用Objective-C或Java编写的应用相比几乎是无法区分的。 React Native所使用的基础UI组件和原生应用完全一致。 你要做的就是把这些基础组件使用JavaScript和React的方式组合起来。React Native让你可以快速迭代开发应用。 比起传统原生应用漫长的编译过程，现在你可以在瞬间刷新你的应用。开启Hot Reloading的话，甚至能在保持应用运行状态的情况下热替换新代码。

官方文档

 

• AngularJs

AngularJS是一个开发动态Web应用的框架。它让你可以使用HTML作为模板语言并且可以通过扩展的HTML语法来使应用组件更加清晰和简洁。它的创新之处在于，通过数据绑定和依赖注入减少了大量代码，而这些都在浏览器端通过JavaScript实现，能够和任何服务器端技术完美结合。Angular是为了扩展HTML在构建应用时本应具备的能力而设计的。对于静态文档，HTML是一门很好的声明式的语言，但对于构建动态WEB应用，它无能为力。所以，构建动态WEB应用往往需要一些技巧才能让浏览器配合我们的工作。

官方文档