Vue开发入门(二) | 说说Vue全家桶有哪些~

全家桶,顾名思义,就是一个系列,可以组合开发成完整强大的Vue项目

前言：

*Vue两大核心思想：组件化和数据驱动。

• 组件化：把整体拆分为各个可以复用的个体
• 数据驱动：通过数据变化直接影响bom展示，避免dom操作。

Vue 全家桶介绍

vue全家桶：包括了vue(渐进式js框架) 、 vuex (状态管理) 、vue-router (路由) 、 vue-resource 、axios 、UI框架（iview、vant、elementUI等）等

Vue有著名的全家桶系列，包含了vue-router，vuex， vue-resource。再加上构建工具vue-cli，sass样式，就是一个完整的vue项目的核心构成。

概括起来就是：1.项目构建工具、2.路由、3.状态管理、4.http请求工具。

Vue

Vue.js官方文档: https://cn.vuejs.org/

1、渐进式框架

2、两个核心点

• 响应式数据绑定
  当数据发生变化的时候，视图自动更新，即双向数据同步，原理利用了ES6中的 Object.definedProperty 中的setter/getter 代理数据，监控对数据的操作。
  
  
• 组合的视图组件
  即页面最终映射为一个组件树，采用树形数据结构进行设计，方便维护，重用。
  
  

4、MVVM

MVVM 是 Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式，其核心是提供对 View 和 ViewModel 的双向数据绑定，这使得 ViewModel 的状态改变可以自动传递给 View，即所谓的数据双向绑定。

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统。

vuex

官方文档: http://vuex.vuejs.org

1、state

类似vue 对象的data, 用来存放数据以及状态。存放的数据为响应式，如果数据改变，那么依赖数据的组件也会发生相应的改变。可以通过mapState把全局的state和 getters 映射到当前组件的 computed计算属性中。

获取state:

// 方式一: store.getters['getRateUserInfo'] //方式二: ...mapGetters({ 
    UserInfo: 'login/UserInfo', // 用户信息 menuList: 'getMenuList', // approve 运价审批 RateUserInfo: 'getRateUserInfo' // Rate用户信息 }) 

2、actions

Action 通过 store.dispatch 方法触发：action支持异步调用（可以调用api），mutation只支持操作同步，并且action提交的是 mutation，而不是直接变更状态。

3、mutation

每个 mutation 都有一个字符串的 事件类型(type) 和一个 回调函数(handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数。

4、getters

vuex核心流程

Vue-cli

Vue-cli官方文档: https://cli.vuejs.org/

Vue-cli是快速构建这个单页应用的脚手架,它提供脚手架@vue/cli。其丰富的官方插件集合，集成了前端生态系统中的最佳工具。完整的图形用户界面，用于创建和管理Vue.js项目。

安装:

# 全局安装 vue-cli $ npm install --global vue-cli # 创建一个基于 webpack 模板的新项目 $ vue init webpack yourproject # 安装依赖 $ cd yourproject $ npm install $ npm run dev 

1、命令行界面

CLI（@vue/cli）是全局安装的npm软件包，并vue在您的终端中提供命令。它提供了通过迅速建立新项目vue create或通过迅速建立新想法原型的能力vue serve。您还可以通过使用图形用户界面来管理项目vue ui。在本指南的接下来的几节中，我们将逐步介绍它可以做什么。

2、CLI服务

CLI服务（@vue/cli-service）是开发依赖项。这是一个npm软件包，本地安装到所创建的每个项目中@vue/cli。CLI服务基于webpack和webpack-dev-server构建。

CLI服务包含了：

• 加载其他CLI插件的核心服务；
• 内部webpack配置，已针对大多数应用进行了优化；
• 在vue-cli-service该项目中的二进制，其自带的基本的serve，build和inspect命令。

3、CLI插件

CLI插件是npm软件包，可为Vue CLI项目提供可选功能，例如Babel / TypeScript转换，ESLint集成，单元​​测试和端到端测试。

vue-resource

github地址: https://github.com/pagekit/vue-resource

vue-resource是一个通过XMLHttpRequrest或JSONP技术实现异步加载服务端数据的Vue插件,提供了一般的 HTTP请求接口和RESTful架构请求接口，并且提供了全局方法和VUe组件实例方法。

vue-resource插件具有以下特点：

1. 体积小: vue-resource非常小巧，在压缩以后只有大约12KB，服务端启用gzip压缩后只有4.5KB大小，这远比jQuery的体积要小得多。
2. 支持主流的浏览器
   和Vue.js一样，vue-resource除了不支持IE 9以下的浏览器，其他主流的浏览器都支持。
   
   
3. 支持Promise API和URI Templates
   Promise是ES6的特性，Promise的中文含义为“先知”，Promise对象用于异步计算。 URI Templates表示URI模板，有些类似于ASP.NET MVC的路由模板。
   
   
4. 支持拦截器
   拦截器是全局的，拦截器可以在请求发送前和发送请求后做一些处理。
   拦截器在一些场景下会非常有用，比如请求发送前在headers中设置access_token，或者在请求失败时，提供共通的处理方式。

   
   
   
   

vue-router

vue-router官方文档: http://router.vuejs.org

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

安装:

npm installvue-router 

Vue Router包含的功能有：

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

import Vue from'vue' import VueRouter from'vue-router' Vue.use(VueRouter) 

axios

axios官方文档: http://www.axios-js.com/

Axios 是一个基于 promise 的 HTTP 库，简单来说就是一个http请求包,可以用在浏览器和 node.js 中。vue官网推荐使用axios进行http调用。

安装:

npm install axios --save 

axios特性

• 从浏览器中创建 XMLHttpRequests
• 从 node.js 创建 http 请求
• 支持 Promise API
• 拦截请求和响应
• 转换请求数据和响应数据
• 取消请求
• 自动转换 JSON 数据
• 客户端支持防御 XSRF>axios是

UI框架(iview、vant、elementUI)

• 丰富的组件和功能，满足绝大部分网站场景
• 提供开箱即用的管理员系统和高阶组件库，极大程度地节省开发成本
• 提供专业，优质的一对一技术支持
• 友好的API，自由灵活地使用空间
• 细致，漂亮的UI
• 事无巨细的文档
• 可自定义主题

3、vant 轻量、可靠的移动端 Vue 组件库,是有赞开源的一套基于 Vue 2.0 的 Mobile 组件库,旨在更快、更简单地开发基于 Vue 的美观易用的移动站点。

还有其他ui框架…

上一篇: Vue开发入门(一)| vue基础指令 &案例