2020-08-01 14:30发布
来个老师解答一下~
Vue全家桶介绍
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.状态管理、4.http请求工具。
下面单独介绍
前言：Vue两大核心思想：组件化和数据驱动。组件化：把整体拆分为各个可以复用的个体，数据驱动：通过数据变化直接影响bom展示，避免dom操作。
一、Vue-cli是快速构建这个单页应用的脚手架,
#全局安装vue-cli$npminstall--globalvue-cli#创建一个基于webpack模板的新项目$vueinitwebpackmy-project#安装依赖，走你$cdmy-project$npminstall$npmrundev
二、vue-router
安装：npminstallvue-router
如果在一个模块化工程中使用它，必须要通过 Vue.use() 明确地安装路由功能：
importVuefrom'vue'
importVueRouterfrom'vue-router'
Vue.use(VueRouter)
另外注意在使用中，可以利用vue的过渡属性来渲染出切换页面的效果。
三、vuex
vuex为专门为vue.js应用程序开发的状态管理可以理解为全局的数据管理。vuex主要由五部分组成：state action、mutation、getters、mudle组成。
使用流程是：组件中可以直接调用上面四个部分除了mudle，
1、state
类似vue对象的data,用来存放数据以及状态。存放的数据为响应式，如果数据改变，那么依赖数据的组件也会发生相应的改变。
获取state的两种方式例子：
store.getters['getRateUserInfo']
2....mapGetters({
UserInfo:'login/UserInfo',//用户信息
menuList:'getMenuList',//approve运价审批
RateUserInfo:'getRateUserInfo'//Rate用户信息
})
注意：可以通过mapState把全局的state和getters映射到当前组件的computed计算属性中。
2、actions
Action通过 store.dispatch 方法触发：action支持异步调用（可以调用api），mutation只支持操作同步，并且action提交的是mutation，而不是直接变更状态。
例如：
conststore=newVuex.Store({
state:{
count:0
},
mutations:{
increment(state){
state.count++
}
actions:{
increment(context){
context.commit('increment')
Action函数接受一个与store实例具有相同方法和属性的context对象，因此你可以调用 context.commit 提交一个mutation，或者通过 context.state 和 context.getters 来获取state和getters。
实践中，我们会经常用到ES2015的 参数解构 来简化代码（特别是我们需要调用 commit 很多次的时候）：
increment({commit}){
commit('increment')
3、mutation
每个mutation都有一个字符串的 事件类型(type) 和一个 回调函数(handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受state作为第一个参数。
4、getters
Vuex允许我们在store中定义“getter”（可以认为是store的计算属性）。就像计算属性一样，getter的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算
constgetters={
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
mapGetters 辅助函数
mapGetters 辅助函数仅仅是将store中的getter映射到局部计算属性：
四、axios
axios是一个http请求包，vue官网推荐使用axios进行http调用。
安装：
npminstallaxios--save
例子：
发送一个GET请求
//通过给定的ID来发送请求
axios.get('/user?ID=12345')
.then(function(response){
console.log(response);
.catch(function(err){
console.log(err);
});
//以上请求也可以通过这种方式来发送
axios.get('/user',{
params:{
ID:12345
2、发送一个POST请求
axios.post('/user',{
firstName:'Fred',
lastName:'Flintstone'
.then(function(res){
console.log(res);
具体参考：https://www.jianshu.com/p/df464b26ae58
最多设置5个标签!
{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','/static/images/logo.png', '推荐 IngmarL 的问题《什么是VUE，还有就是VUE的组成？》','http://www.shouhuola.com/answer/26027/70145.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
Vue全家桶介绍
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.状态管理、4.http请求工具。
下面单独介绍
前言：Vue两大核心思想：组件化和数据驱动。组件化：把整体拆分为各个可以复用的个体，数据驱动：通过数据变化直接影响bom展示，避免dom操作。
一、Vue-cli是快速构建这个单页应用的脚手架,
#全局安装vue-cli$npminstall--globalvue-cli#创建一个基于webpack模板的新项目$vueinitwebpackmy-project#安装依赖，走你$cdmy-project$npminstall$npmrundev
二、vue-router
安装：npminstallvue-router
如果在一个模块化工程中使用它，必须要通过 Vue.use() 明确地安装路由功能：
importVuefrom'vue'
importVueRouterfrom'vue-router'
Vue.use(VueRouter)
另外注意在使用中，可以利用vue的过渡属性来渲染出切换页面的效果。
三、vuex
vuex为专门为vue.js应用程序开发的状态管理可以理解为全局的数据管理。vuex主要由五部分组成：state action、mutation、getters、mudle组成。
使用流程是：组件中可以直接调用上面四个部分除了mudle，
1、state
类似vue对象的data,用来存放数据以及状态。存放的数据为响应式，如果数据改变，那么依赖数据的组件也会发生相应的改变。
获取state的两种方式例子：
store.getters['getRateUserInfo']
2....mapGetters({
UserInfo:'login/UserInfo',//用户信息
menuList:'getMenuList',//approve运价审批
RateUserInfo:'getRateUserInfo'//Rate用户信息
})
注意：可以通过mapState把全局的state和getters映射到当前组件的computed计算属性中。
2、actions
Action通过 store.dispatch 方法触发：action支持异步调用（可以调用api），mutation只支持操作同步，并且action提交的是mutation，而不是直接变更状态。
例如：
conststore=newVuex.Store({
state:{
count:0
},
mutations:{
increment(state){
state.count++
}
},
actions:{
increment(context){
context.commit('increment')
}
}
})
Action函数接受一个与store实例具有相同方法和属性的context对象，因此你可以调用 context.commit 提交一个mutation，或者通过 context.state 和 context.getters 来获取state和getters。
实践中，我们会经常用到ES2015的 参数解构 来简化代码（特别是我们需要调用 commit 很多次的时候）：
actions:{
increment({commit}){
commit('increment')
}
}
3、mutation
每个mutation都有一个字符串的 事件类型(type) 和一个 回调函数(handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受state作为第一个参数。
4、getters
Vuex允许我们在store中定义“getter”（可以认为是store的计算属性）。就像计算属性一样，getter的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算
constgetters={
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
}
mapGetters 辅助函数
mapGetters 辅助函数仅仅是将store中的getter映射到局部计算属性：
四、axios
axios是一个http请求包，vue官网推荐使用axios进行http调用。
安装：
npminstallaxios--save
例子：
发送一个GET请求
//通过给定的ID来发送请求
axios.get('/user?ID=12345')
.then(function(response){
console.log(response);
})
.catch(function(err){
console.log(err);
});
//以上请求也可以通过这种方式来发送
axios.get('/user',{
params:{
ID:12345
}
})
.then(function(response){
console.log(response);
})
.catch(function(err){
console.log(err);
});
2、发送一个POST请求
axios.post('/user',{
firstName:'Fred',
lastName:'Flintstone'
})
.then(function(res){
console.log(res);
})
.catch(function(err){
console.log(err);
});
具体参考：https://www.jianshu.com/p/df464b26ae58
一周热门 更多>