Vue 学习入门指南

如果你是一名 Vue 开发新手，可能已经听过很多行话术语，比如单页面应用程序、异步组件、服务器端渲染等等，或者还听说过与 Vue 有关的一些工具和库，比如 Vuex、Webpack、Vue CLI 和 Nuxt。

那么究竟什么是Vue，有什么作用？

公众号：代码集中营
每周分享技术文章、优质软件资源

Vue.js是一套用于构建用户界面的渐进式框架，主要用于快速的构建前端界面，与其它大型的前端框架不同，Vue被设计为可以自底向上逐层应用。相比Angular.js来说，Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合，是初创项目的前端首选框架。作为一个新兴的前端框架，Vue.js大量借鉴和参考了Angular.js和React.js等优秀的前端框架。而在版本支持上，Vue.js抛弃了对IE8的支持，对移动端的支持也有一定的要求，也就是说使用Vue.js进行移动跨平台开发时需要Android 4.2+和iOS 7+支持。

Vue在MVVM模式中，充当的是VIewModel，就是用于处理数据交互与相应

言归正传，要入门Vue需要掌握哪些呐，这是代码君绘制的结构图

根据架构图，我们可以知道Vue架构的搭建需要学会哪些知识！

首先，在学习vue.js的前提是掌握了 html/js/css，这块应该没什么难度，大家很容易就能掌握。
接下来需要掌握ES6, 这是大前提一定要懂，一定要懂，一定要懂， 推荐阅读阮一峰的 ES6入门，基础这里必须掌握，否则也没必要往下阅读，因为没学会走路就想跑，很容易摔倒！

《ECMAScript 6 入门教程》PDF版

ES2015简介和基本语法

一、View 和 Components

View 就是UI界面，实现基本是html+css，当然了，目前也有主流的UI组件库，我们只需要站在巨人的肩膀进行开发，可以更加高效。
####移动端UI组件库：有赞出品的 Vant
####PC端UI组件库：饿了么出品的 Element

Components 就是组件，你可以这么理解，一个View 可以由多个Components组件构成，比如一个列表页，可以由头部组件+列表组件+尾部组件，构成一个界面，作为新手，组件化可以先放一下，先学会利用成熟的组件库，进行UI开发即可，新手通过现成的UI库，会比较容易快速实现UI界面

二、Router

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：

• 嵌套的路由/视图表
• 模块化的、基于组件的路由配置
• 路由参数、查询、通配符
• 基于 Vue.js 过渡系统的视图过渡效果
• 细粒度的导航控制
• 带有自动激活的 CSS class 的链接
• HTML5 历史模式或 hash 模式，在 IE9 中自动降级
• 自定义的滚动条行为

对于新手来说，你只需要知道，路由Router 用来分发请求对应跳转的界面，比如用户访问网址：http://localhost:8088/pageA , http://localhost:8088/pageB,我们需要根据请求路径，通过路由的方式，配置跳转对应的界面

三、Vuex + Store

什么是vuex？Vuex 是一个专门为 Vue.js 应用设计的 状态管理模型 + 库。它为应用内的所有组件提供集中式存储服务，其中的规则确保状态只能按预期方式变更。状态改变了，对应的视图也会改变。

上面比较官方，我举一个具体例子，比如我们写界面需要判断是否登陆，一般是根据token，这个token的状态管理就是用Vuex+Store,存储token状态，然后每次调用接口的时候，取出token数据，如果为空，自动跳转到登陆界面，所以你只需要理解Vuex + Store 用于存储，类似轻量级数据库

四、接口API + Mock

接口API就是网络请求，这里代码君推荐使用 axios
axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，它本身具有以下特征：

• 从浏览器中创建 XMLHttpRequest
• 从 node.js 发出 http 请求
• 支持 Promise API
• 拦截请求和响应
• 转换请求和响应数据
• 取消请求
• 自动转换JSON数据
• 客户端支持防止 CSRF/XSRF

这里新手只需要知道网络请求框架我们用的是axios，后续代码君会出专门文章对 axios 使用进行讲解

Mock专业术语就是数据模拟，有了mockjs，前端工程师再也不用等后端人员开发好之后再测数据了，因为mockjs可以拦截ajax请求，有了mockjs我们可以模拟后台返回数据，以方便的进行一系列的操作。这个新手可以先了解一下概念，后续在网络请求模拟数据的时候会用到，到时候也会专门讲解的

五、Directives

自定义指令，就是除了VUE定义的指令外，还支持用户注册自定义指令，那么你可能会问，什么是vue的指令，我举几个常用的指令，后续你一定会碰见的

• v-bind指令： 是Vue中，提供的用来绑定属性的指令,只能实现数据的单向绑定,从M自动绑定到V,无法实现数据的双向绑定。
• v-model指令：Vue中唯一一个实现双向数据绑定的指令, 注意 : 只能运用到表单元素中
• v-for指令： 用于写循环界面，比如列表页，复用同一个view
• v-if 和 v-else 和 v-else-if 还有 v-show指令：用于控制界面是否显示，或者瞒住什么条件进行显示
  上面举的例子是比较常用的，这个新手有一个概念就好，自定义指令还用不到对于新手，但是系统定义的那些常用指令，我们必须熟悉哈~

六、Mixins

混入 (mixins)： 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。

这个概念官方说的比较绕，我举一个简单的例子，Vue 界面一些公用的东西，比如头部、尾部，不是可以通过Components实现组件化开发，当我们在开发JS代码的时候，如果遇到多个界面执行相同的逻辑代码，是否也可以抽离出来呐？基于这个思考，Mixins就出来了，Mixins相当于js中的组件化，把相同的抽离出来，然后再通过Mixins插入到js里面

那么可能有人会问，抽离出工具类不也可以嘛！ Mixins 和抽离出来的工具类有什么差别呐？
工具类只能针对方法进行抽离，Mixins 可以说更加强大，是可以根据生命周期进行抽离的，比如A、B、C界面都需要在创建的时候，验证有没有登陆，就可以在创建的生命周期里面抽离出验证登陆的方法，然后在通过Mixins插入到各个界面里

新手只需要了解 表现层与 API 层，业务层比较深入，可以后面再了解，工具层大家都比较好理解，就是一些常用的时间日期管理工具类、浮点计算等工具类的封装，基础设施层，代码君在下一篇文章，Vue 入门环境搭建 进行讲解！

好了，这次的入门指南就这些，此篇文章是对 Vue 整体的框架进行宏观剖析，就是希望初学者能对 Vue 设计到的知识面有一个宏观的概念，之后代码君会分别对涉及到的知识点依次进行讲解！