在这里插入图片描述
全家桶,顾名思义,就是一个系列,可以组合开发成完整强大的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、渐进式框架

Vue.js是一套用于构建用户界面的渐进式框架。Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
渐进式表现：声明式渲染—组件系统—客户端路由—大数据状态管理—构建工具

2、两个核心点

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

3、虚拟DOM
利用在内存中生成与真实DOM与之对应的数据结构，这个在内存中生成的结构称之为虚拟DOM。当数据发生变化时，能够智能的计算出重新渲染组件的最小代价并应用到DOM操作上。

4、MVVM

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

M：Model（数据层，也就是指数据（前端是js））
V：View ( 也就是指DOM层 或用户界面 )
VM : ViewModel (处理数据和界面的中间层，也就是指Vue)
在这里插入图片描述
5、声明式渲染

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

vuex

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

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。vuex主要由五部分组成：state、 action、mutation、getters、mudle组成。
使用流程是： 组件中除了mudle可以直接调用tate、 action、mutation、getters四个部分

在这里插入图片描述
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 允许我们在 store 中定义“getter”（可以认为是 store 的计算属性）。就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。
mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性。

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 中自动降级
  • 自定义的滚动条行为

可以利用vue的过渡属性来渲染出切换页面的效果。
在一个模块化工程中使用它，必须要通过 Vue.use() 明确地安装路由功能：

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)

1、View UI，即原先的iView，是一套基于Vue.js的开源高质量UI组件库(分为小程序和pc端等不同版本)，主要服务于PC界面的中后台产品。
在这里插入图片描述
特性:

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

谁在使用:
阿里巴巴、百度、腾讯、今日头条、京东、滴滴出行、美团、新浪、联想、科大讯飞、同程艺龙…
2、elementUI 是基于 Vue 2.0 桌面端中后台组件库。

在这里插入图片描述

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

还有其他ui框架…

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

Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Vue里echarts根据页面大小动态调整/自适应

Vue里echarts根据页面大小动态调整/自适应

avatar Vue