vue.js全家桶有哪些

这篇文章将为大家详细讲解有关vue.js全家桶有哪些,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

vue。js全家桶包有:1、【vue + vuex】状态管理;2、【vue-router】路由;3、【vue-resource】; 4, axios; 5、UI框架。

<强> vue。js全家桶包有:

vue全家桶:vue + vuex(状态管理)+ vue-router(路由)+ vue-resource + axios + UI框架(iview、vant elementUI等等)

vue有著名的全家桶系列,包含了vue-router (http://router.vuejs.org), vuex (http://vuex.vuejs.org), vue-resource (https://github.com/pagekit/vue-resource)。再加上构建工具vue-cli, sass样式,就是一个完整的vue项目的核心构成。

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

下面单独介绍

前言:vue两大核心思想:组件化和数据驱动。组件化:把整体拆分为各个可以复用的个体、数据驱动:通过数据变化直接影响bom展示,避免dom操作。

<强>一、vue-cli是快速构建这个单页应用的脚手架,

#,全局安装,vue-cli 　　美元,npm  install ——global  vue-cli 　　#,创建一个基于,webpack 模板的新项目 　　美元,vue  init  webpack 我的项目 　　#,安装依赖,走你 　　美元,cd 我的项目 　　美元,npm 安装 　　美元,npm  run  dev

<强>二,vue-router

安装:npm installvue-router

如果在一个模块化工程中使用它,必须要通过Vue.use()明确地安装路由功能:

import  Vue 从# 39;vue # 39; 　　import  VueRouter 从# 39;vue-router& # 39; 　　Vue.use (VueRouter)

另外注意在使用中,可以利用vue的过渡属性来渲染出切换页面的效果。

<强>三,vuex

vuex为专门为vue。js应用程序开发的状态管理可以理解为全局的数据管理.vuex主要由五部分组成:国家行动,突变,getter, mudle组成。

使用流程是:组件中可以直接调用上面四个部分除了mudle,

1,国家

类似vue对象的数据,用来存放数据以及状态。存放的数据为响应式,如果数据改变,那么依赖数据的组件也会发生相应的改变。

获取状态的两种方式例子:

第一种:

store.getters [& # 39; getRateUserInfo& # 39;]

第二种:

…mapGetters ({ 　　,,,,,,,用户信息:,& # 39;登录/用户信息# 39;,,//,用户信息 　　,,,,,,,menuList:, & # 39; getMenuList& # 39;,,//, approve 运价审批 　　,,,,,,,RateUserInfo:, & # 39; getRateUserInfo& # 39;,//,率用户信息 　　,,})

注意:可以通过mapState把全局的状态和getter映射到当前组件的计算计算属性中。

2,行动

操作通过商店。派遣方法触发:行动支持异步调用(可以调用api),突变只支持操作同步,并且行动提交的是突变,而不是直接变更状态。

例如:

const  store =, new  Vuex.Store ({ 　　,,状态:{ 　　,,,数:0 　　,,}, 　　突变才能:{ 　　,,,increment (状态),{ 　　,,,,state.count + + 　　,,,} 　　,,}, 　　行动才能:{ 　　,,,increment (上下文),{ 　　,,,,,context.commit(& # 39;增量# 39;) 　　,,,} 　　,,} 　　})

操作函数接受一个与商店实例具有相同方法和属性的背景下对象,因此你可以调用context.commit提交一个突变,或者通过上下文。状态和上下文。getter方法来获取状态和getter。

实践中,我们会经常用到ES2015的参数解构来简化代码(特别是我们需要调用承诺很多次的时候):

动作:{ 　　increment 才能;({},commit ) { 　　,,,commit() & # 39;增量# 39; 　　,,} 　　}

3,变异

每个突变都有一个字符串的事件类型(类型)和一个回调函数(处理器)。这个回调函数就是我们实际进行状态更改的地方,并且它会接受国家作为第一个参数。

4, getter

Vuex允许我们在商店中定义“getter”(可以认为是商店的计算属性)。就像计算属性一样,getter的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算

const  getters =, { 　　,,getRateInitData: state =祝辞,state.rateInitData, 　　,,getchooseRateObj: state =祝辞,state.chooseRateObj, 　　,,getSearchRateParams: state =祝辞,state.searchRateParams, 　　,,getSearchRateResult: state =祝辞,state.searchRateResult, 　　,,getRateUserInfo: state =祝辞,state.RateUserInfo, 　　,,getMenuList: state =祝辞,state.menuList, 　　,,getRateQueryParams: state =祝辞,state.rateQueryParams, 　　,,getRateQueryResult: state =祝辞,state.rateQueryResult, 　　,,getCheckRateDetailParams: state =祝辞,state.checkRateDetailParams, 　　,,getReferenceCondition: state =祝辞,state.referenceCondition, 　　,,getWaitApprovalParams: state =祝辞state.waitApprovalParams 　　}

vue.js全家桶有哪些