快速入门Web前端开发的正确姿势整理

1、快速入门web前端开发的正确姿势整理门标准入门标准很容易，就一条：达到能参加 web 前端实际项目的开发水平。请注重，是实际项目，这就需要了解如今的实际项目开发都用了哪些技术栈。html/css/javascript 这三大基础技术栈绝对是需要把握的，但要能参加实际项目开发，绝对还要把握其他一些主流的框架体系。几年前， jquery + bootstrap 可以说是一统江湖，是前端领域的肯定霸主。而这几年，随着 angular、react、vue 等框架的兴起，变成了百家争鸣的局面。这几年，web 前端的技术进展真是太快了，相应地，技术栈也就变得十分多，除了最基本的 html/css/java

2、script，以及 vue/react/angular 等这些 javascript 框架和各自的生态体系，还有 css 预处理器 sass/less/stylus，还有 typescript，还有 grunt/webpack/gulp 等各种打包构建工具，还有其他一大堆技术栈。这么多技术栈，我们不行能一致把握，就算是资深的前端工程师，也只是精通其中一部分，比如，有些精通 angular，有些把握 react，有些则认识 vue，很少有人对三种框架生态体系都十分了解。因此，我们入门也没须要每种框架都学习，只要选择一种就够了。而且，作为全栈，我们学习一门技术更重要的是要学习技术背后的编程思想、设

3、计思想、架构思想等。而不管是 angular、react 还是 vue，其背后的核心设计思想都是组件化的设计，因此只要把握一种框架，我们也就能学习到前端技术的核心思想了。那么，我们应当学哪种框架体系呢？我的建议是从 vue 开头，由于 vue 的学习成本是最低的，入门容易，而且这两年 vue 可以说是浮现了爆发式的增长，已经直逼 react。react 的主要学习成本在于要把握 jsx 语法，而且文档还大多都是英文。vue 由于是国人开发和维护的，自然对国内的开发者更友好。angular 则是个大而全的框架，显得太重，学习成本自然最高。至于 jquery + bootstrap 这套，已经过时

4、了，建议没须要去学习了，究竟我们的时光很珍贵，还有一大堆更有价值的东西等着我们去学。因此，我们要入门 web 前端开发的话，除了要学习 html/css/javascript 三大基础技术栈，还要了解 vue 体系。而 vue 体系，除了 vue 框架本身，还包括其他技术栈，这个后面再说。html/css/javascripthtml、css、javascript 是前端的核心基础，所以必需要把握。html 主要就是 html5，相比之前的版本，新增了无数新特性。css 则主要是 css3 了，相比以前的版本，主要就是作了模块化的拆分。javascript 其实分为三部分：ecmascript

5、、dom 和 bom。ecmascript 简称 es，是 javascript 的核心，目前最新版本已经是 es2017，是 es6 的第三个小版本。dom 是文档对象模型，其实就是一套拜访和操作 html 全部元素的 api。bom 则是扫瞄器对象模型，用于拜访和操作扫瞄器的一些特性。html/css/javascript 的学习资源比较多，我推举几个。首先是 w3school 的系列教程：html：该教程也包括了 html5 新增的内容，但讲得没下面特地讲解 html5 的细，所以该教程我建议只看 html 基础教程和表单部分即可html5：该教程讲解了 html5 的新特性css：该教

6、程并不包括 css3 新增的特性，所以还需要学习下面的 css3 的教程css3：该教程内容比较少，只包含 css3 新增的特性javascript：该教程只是讲解了十分基础的语法不过，我更推举菜鸟的教程，内容虽然也是来自 w3school，但部分内容比 w3school 的更具体，以下是教程地址：html：css：javascript：html 和 css 只要按照以上教程学习就足够了，但 javascript 则是不够的，以上教程缺少了 es6 及更高版本的内容，后面我再推举其他学习资源举行补充。书籍方面，html 和 css 基础方面的，首推head first html与css，编排设

7、计通俗易懂，就连彻低零基础的非 it 人员都适合学习。不过，head first 这本书没有涉及到 html5 和 css3 的更新内容。不过，head first 有另一本书讲解了 html5，叫head first html5 programming，不过，要认识 html5 的使用，还是要先把握一点 javascript 基础。css3 方面 head first 则没有相应的书籍，因此，我推举另一本css3有用指南。javascript 方面，我首推javascript高级程序设计这本书，书中内容由浅入深，也是写得通俗易懂，适合入门。另外，有些人会推举javascript权威指南，但这

8、本书主要还是一本字典书，略显晦涩，其实不适合入门。不过javascript高级程序设计还是基于 es5 的，为了补充 es6 的内容，推举阮一峰的es6标准入门，目前是第3版，内容已经笼罩了最新版本的 es2017。另外，由于这是一本开源教材，所以也可以挺直去阮一峰的官网免费阅读，以下是链接地址：ecmascript 6 入门：另外，有一套系列书叫you don’t know js也要推举给大家，也是开源教材，这套书会让你对 javascript 知其然也知其所以然，也包含了 es6 的内容，不过这套书面对初学者的，只适合用来进阶。也出版了中文翻译的书籍，叫你不知道的javascr

9、ipt，目前惟独上卷和中卷两本，据评价，上卷的翻译还不错，但中卷的翻译则普通般，下卷不知道什么时候才出版。以下是系列书的github地址：you don’t know js：那么，这么多学习资源，我们应当如何学习才高效呢？其实，和前面学习 android 和 ios 时一样，我们主要还是为了了解各种核心概念，我们不行能在短期内认识全部学问点，因此，我还是和前面的文章一样，也排列出一些核心的学问点吧。html基础：以 w3school 或菜鸟的 html 教程为主，认识各种常用标签的使用，尤其是标题、段落、链接、图像、表格、列表、表单、区块、布局、css、脚本等css基础：同样以 w

10、3school 或菜鸟的 css 教程为主，认识 css 语法和挑选器、样式、框模型、定位等模块的内容javascript基础：首先作为一门编程语言，语言本身的基础绝对要认识，包括数据类型、变量、运算符、控制流、函数、对象等；另外，也要认识 dom；bom 容易了解下就可以了，用法场景不多html5：html5 的新特性绝对要了解，内容其实也不是无数，核心的就是 canvas、svg、对多媒体的支持、web 存储、应用缓存、websocket等css3：css3 也是要认识那些新特性，最核心的就是弹性盒子es6：es6 自然也是要认识的，学好阮一峰的ecmascript 6 入门教程就足够了v

11、ue 体系在开头正式学习 vue 之前，我们先来了解几个概念，这样才干更好理解 vue 的一些设计理念。第一个概念是单页应用程序，就是惟独一个 web 页面的应用，是只加载单个 html 页面并在用户与应用程序交互式动态更新该页面的 web 应用程序。其次个概念是virtual dom，即虚拟 dom，容易说就是一个模拟 dom 树的 javascript 对象，是为了避开大面积操作真切 dom 而导致的性能问题。第三个概念是响应式系统，通过数据模型和 view 的数据绑定，系统可以对数据模型的修改自动响应到视图上。第四个概念则是组件化，vue 和 react 都是通过组合各种组件组成应用程序

12、的。理解了这些概念，你才干更好的理解 vue/react 这些前端框架体系。还有，开发工具方面，我推举 visual studio code，一款免费开源的轻量级代码编辑器，macos、windows、linux 都支持，有人评价说比sublime开源，比atom更快，比webstorm更轻，所以说，你值得拥有。vue 体系包含了无数技术栈，一套完整的 vue 项目普通包括 vue + vue-router + vuex + vue-cli + axios + sass + webpack，其中，vue + vue-router + vuex 又称为 vue 全家桶，由于这三套技术栈都是 vu

13、e 官方推出的，其他框架和工具则是第三方的。那么，就让我们来一个个了解这些技术栈吧。vue：vue 即是 vue.js 框架本身，是一套采纳了 mvvm 模式的 javascript 框架，它和 react 一样用法了 virtual dom，也提供了响应式和组件化的视图组件。不过与 react 不同的是，vue 更推举用法基于 html 的模板，这也是它相比 react 等其他框架更简单入门的缘由。vue-router：由于现在大多数 web 应用都是单页应用，那要实现单个页面里的不同视图的跳转，就要用到路由，vue-router 库就是用来实现单页应用的路由功能。vuex：vuex 是一个

14、类 flux 的状态管理库，它采纳集中式存储管理应用的全部组件的状态。关于什么是 flux，可以参考阮一峰写的一篇文章flux 架构入门教程。vue-cli：vue-cli 是官方提供的指令行工具，用它可以迅速创建 vue 项目。axios：axios 是 vue 官方推举的一个第三方 http 库，它是基于 promise 的，promise 是 es6 的新增特性。sass：css 的一款预处理器，容易入门可以看看阮一峰的一篇文章sass使用指南。预处理器另外还有 less 和 stylus，不过不少大牛最推举的还是 sass。webpack：webpack 是打包构建工具，可以类比为 j

15、ava 的 gradle。不过 webpack 是基于 node.js 的，所以要用熟 webpack，还要学点 node.js 的基础学问，起码要懂得配置 node.js 的运行环境以及了解 node.js 的包管理工具 npm 的常用指令。对于刚接触当代前端的人员来说，存在太多生疏的概念需要了解，一时可能难以消化，vue 的作者尤雨溪写过一篇新手向：vue 2.0 的建议学习挨次，可以根据他的建议去学习。学习资源方面，最好的应当就是官方文档了。另外，vue.js实战这本书有尤雨溪作推举序，也可以买来看看，可以作为官网的补充资源。对于一些概念假如还不是很理解，也可以临时先放一放，后面在做项目

16、开发的过程中可能你就会理解了。实战入门最关键的还是要通过项目实战才干真正入门，这也是我一贯推崇的。也是和 android、ios 实战一样的建议，假如条件允许，你可以向上司申请参加自己公司的前端项目开发，然后开头去认识代码和实现一些容易的工作任务，建议先从完成一些容易的ui界面开头。同样，开源项目自然也是少不了，vue 这块的开源项目我推举两个：vue2-happyfri：很容易的一个小项目，很适合入门练习vue2-elm：用 vue 仿照饿了么的一个完整项目，重点推举另外，也附上一个汇总了众多 vue 开源项目的 github 地址：对于开源实战项目的操作上，我依旧还是建议先给应用改皮肤开头，之后尝试着自己做出一个类似的app。以上面的 vue 版饿了么项目为例，你先给它全部页面先换个皮肤，包括背景、按钮、文字等等，通通换掉一遍，然后尝试自己做一个百度外卖或美团外卖，当你做完，对付普通的 vue 项目开发就应当没有问题了。之后也按照需要可以再去学下 react 体系，这时候学起来肯定不会吃力。总结前端开发入门，要学的技术栈真的无数，除了最基础的 html/css/javascript，