image

簡(jiǎn)介

前端發(fā)展迅速，開(kāi)發(fā)者富有的創(chuàng)造力不斷的給前端生態(tài)注入新生命，各種庫(kù)/框架/工程化構(gòu)建工具層出不窮，眼花繚亂，不盲目追求前沿技術(shù)，學(xué)習(xí)框架和庫(kù)在滿(mǎn)足自己開(kāi)發(fā)需求的基礎(chǔ)上，然后最好可以對(duì)源碼進(jìn)行調(diào)研，了解和深入實(shí)現(xiàn)原理，從中可以獲得更多的收獲

隨著前端發(fā)展，前端的職責(zé)也跟著變化，不再僅僅是設(shè)計(jì)稿切圖+JS實(shí)現(xiàn)交互，已經(jīng)可以涉獵到后端，微信小程序，原生APP等領(lǐng)域，大前端，全棧開(kāi)發(fā)，小程序開(kāi)發(fā)，前端架構(gòu)師，帶來(lái)了更多崗位選擇的同時(shí)，也是對(duì)自身技術(shù)一種挑戰(zhàn)

【前端匯總】這里會(huì)對(duì)前端相關(guān)技術(shù)教程，開(kāi)源框架，庫(kù)，工具等相關(guān)資源，進(jìn)行分類(lèi)記錄，持續(xù)更新，通過(guò)記錄共享可以方便大家找到想要資源

IDE

• vscode 推薦
• sublime

LESS

• less css 預(yù)處理語(yǔ)言

SASS

• sass 成熟、穩(wěn)定、強(qiáng)大的 css 擴(kuò)展語(yǔ)言

JavaScript

• 前端資源教程 i5ting
• 廖雪峰JavaScript教程
• JavaScript 標(biāo)準(zhǔn)參考教程（alpha） -阮一峰
• JavaScript Promise迷你書(shū) -azu
• 前端的異步解決方案之Promise和Await Async
• You Don't Know JS (book series)
• You Don't Need jQuery jQuery API 替代的方法
• JavaScript 秘密花園
• JavaScript 設(shè)計(jì)模式 系列 AlloyTeam

ES2015(ES6)

• 《ECMAScript 6入門(mén)》 -阮一峰
• EcmaScript6 全規(guī)范（含node） -ouvens
• 30分鐘掌握ES6/ES2015核心內(nèi)容（上）
• 30分鐘掌握ES6/ES2015核心內(nèi)容（下）

TypeScript

• TypeScript語(yǔ)法

NodeJS

• 七天學(xué)會(huì)NodeJS -Nanqiao Deng
• Node入門(mén)到精通 i5ting
• 高可用架構(gòu)專(zhuān)用《全棧工程師之路-Node.js》 i5ting
• 前后端分離的思考與實(shí)踐

Babel

• babel 入門(mén)教程

Bower

• 基礎(chǔ)教程

Yeoman

• yeoman 安裝和使用 - 快速構(gòu)建web應(yīng)用

Gulp

• Gulp學(xué)習(xí)總結(jié)
• Gulp不完全入門(mén)教程

Grunt

• 用grunt搭建自動(dòng)化的web前端開(kāi)發(fā)環(huán)境-完整教程

Webpack

• Webpack 官網(wǎng)
• Webpack 中文指南 -趙達(dá)
• Webpack，101入門(mén)體驗(yàn) -Yika
• Webpack 入門(mén)指迷 -題葉

Parcel

• 官方教程 Web應(yīng)用打包工具，不需要任何配置

Vue

• vue2.0官方教程
• vue2.0 探索之路 生命周期和鉤子函數(shù)的一些理解

React

• react教程 中文版

AngularJS

• AngularJS入門(mén)教程
• AngularJS 菜鳥(niǎo)教程

微信小程序

• wepy 讓小程序支持組件化開(kāi)發(fā)的框架 微信官方框架
• iview-weapp 一套高質(zhì)量的微信小程序 UI 組件庫(kù)
• vant-weapp 贊移動(dòng)端組件庫(kù) Vant 的小程序版本
• minui 基于規(guī)范的小程序 UI 組件庫(kù)，自定義標(biāo)簽組件，簡(jiǎn)潔、易用、工具化
• wux-weapp 微信小程序自定義 UI 組件
• taro 支持用 React 的開(kāi)發(fā)方式編寫(xiě)一次代碼，生成能運(yùn)行在微信小程序、H5、React Native 等的應(yīng)用

測(cè)試

• Mock.js 生成隨機(jī)數(shù)據(jù)，攔截 Ajax 請(qǐng)求
• 測(cè)試框架 Mocha 實(shí)例教程 阮一峰

模塊化

• CommonJS 規(guī)范 阮一峰

Git

• Git教程

GitBook

• Gitbook 國(guó)外的在線markdown可編輯成書(shū)

常用前端插件

1.圖片：

• zooming 圖片縮放插件
• viewer 圖像查看器

2.富文本編輯器：

• kindeditor
• ueditor

3.日期插件：

• bootstrap-datepicker

4.表單驗(yàn)證庫(kù)：

• jquery-validate 基于jquery
• 15個(gè)最佳的 JavaScript 表單驗(yàn)證庫(kù)

5.圖表：

• echart 百度開(kāi)源
• chartjs
• highcharts 商用收費(fèi)

6.特效：

• swiper 滑動(dòng)特效插件，內(nèi)容觸摸滑動(dòng)
• impress.js 幻燈片，前端裝X利器
• parallax 視覺(jué)差特效引擎
• fullPage 全屏滾動(dòng)特效 jquery

7.各種功能：

• layer 彈窗（層）解決方案
• clipboard.js 復(fù)制,黏貼
• draggable 拖拽
• json editor json轉(zhuǎn)表單編輯

前端UI框架

• Element UI 基于vue2.0
• Vant 輕量、可靠的移動(dòng)端 Vue 組件庫(kù)
• Bootstrap 當(dāng)前最新到V4
• Layui UI組件
• WeUI 為微信Web 服務(wù)量身設(shè)計(jì)

其他

• iconfont [矢量圖標(biāo)] 阿里云矢量圖標(biāo)庫(kù)，可以在平臺(tái)里構(gòu)建自己的圖標(biāo)庫(kù)

博客搭建

• Hugo[Go] 靜態(tài)網(wǎng)站生成器，托管第三方git平臺(tái) Pages
• Hexo[nodejs] 可托管第三方git平臺(tái) Pages
• Ghost [nodejs]
• jekyll 可托管第三方git平臺(tái) Pages
• WordPress 需要服務(wù)器環(huán)境

Windows開(kāi)發(fā)必備神器

• Cmder 一款超好用的工具cmder
• Scoop 軟件包管理系統(tǒng)，像 Mac 上的 Homebrew， Chocolatey，Homebrew-Cask
• Chocolatey 像一個(gè)軟件包管理工具（背后使用 Nuget ）

首發(fā)博客