Vue从入门到精通（1）--前言、基础知识

前言

MVVM框架已经在前端框架中普遍使用，在nodejs和webpack组成的工业级编译开发环境下，前端技术已经要进入工业级的水平。vue作为一个轻量级的mvvm前端框架，被越来越多的人喜爱和使用。

    写这篇文章是由于公司要上移动端web的项目，而我作为前端却没有一点相关经验，在网上搜索教程并没有类似java、js、jquery等那样系统的教程。在花了两周的时间看了三个视频教程后，才渐渐明白前端技术已经要进入工业级的水平了，自己在这两周的时间也走了不少弯路，连知识点的学习顺序都反了。所以我后来在学相关知识点的时候，都有一种似曾相识的感觉：这个语法我在之前哪个教程见过… …

    我是css2、html4、ES3的基础，虽然有几个项目经验，无奈网上难找到合适的学习路线，论坛、知乎、百度知道、CSDN中大多是针对某一门技术侃侃而谈，且大都说一周上手开始做项目。抛开个人水平谈学习曲线都是耍流氓。苦于网上搜贴每天大海捞针式的学习，为了避免后来之人也为此苦恼，我总结了以下的学习路线：

1. 基础知识

   1. ES3（基础的javascript）、css、html
   2. 普通的模块化（requireJS、AMD/CMD）
   3. sass、less等可编程样式语言
      
      

2. 第一阶段

   1. html5、css3、ES5
   2. 响应式布局、Bootstrap
   3. 字体图标
      
      

3. 第二阶段

   1. ES6
   2. NodeJS
   3. webpack、babel

4. 第三阶段

   1. MVVM
   2. Vue、React、AngularJS简介及对比
      
      

5. 第四阶段

   1. vue2.0语法
   2. vue2.0+webpack搭建开发环境
   3. 官方脚手架vue-cli
   4. 填坑
   5. vue-router、vue-resource、vuex、mint-ui
   6. 多页面、跨域问题
      
      

    当然，每个人的学习习惯不同，天资也不同，不必完全按照该路线学习。水平有限，时间匆忙，总结的内容不一定正确，若有错误烦请指正，十分感谢！

    注意，这并不是我个人写的关于技术、知识点的学习教程，而是基于网上各大神的无私分享整理出来的知识路线。引用资料均标明了来源及连接，侵删！

---

基础知识

ES3、css、html

    了解ES的历史。笼统的说，ES3即现在网上大部分教程中所讲的JS基本用法，ES4由于各方争执流产。ES5添加了部分功能，也是现在几乎全部浏览器都实现了的标准。ES6、ES7现在大多数浏览器尚未实现，需要转换成ES5的代码或使用js补丁（js垫片）。
css、html需要有至少2-3个项目经验，单纯的看教程和示例，没有真正解决过问题并不能真正掌握知识点，继续学后续的技能也会觉得迷迷糊糊。

普通的模块化

    写过前端的人都知道前端文件的杂乱无章，没有一个统一的项目结构模式，若没有良好的前端架构设计和前端开发经验，经常会导致文件结构“脏乱差”，尤其体现在js上。于是提出了前端的JS模块化开发。主要技术包括requireJS、AMD/CMD。这些技术你不需要全部了解，可以使用requireJS写个例子，教程网上比较多。至于AMD/CMD，我就直接撸了下网上的介绍，了解几个关键字和知识点就过去了。

sass、less

    对于习惯了后台开发的人来说，css一开始总让人头大。即便是前端老手，徒手写大量的css有时也吃力。于是sass、less等可编程的css样式扩展出现了。他们自定义了一套语法，用类似程序员习惯的编程风格写样式，最后通过相关工具直接生成.css文件（他们也提供了前端解析sass、less的js库，但鉴于前端解析会影响页面效率，不建议这么使用）。
    当然，据说这样的技术很多大公司或者持久型的项目团队才会使用。毕竟增加了学习成本，在不经常使用的情况下去硬记住相关语法也是愁人。所以这个知识点只是建议做两个例子了解，不建议深入学习。我当时因为使用bootstrap而学习的sass，不过最终项目没用到sass，略可惜。