云骑士一键装系统-简单一键在线装机工具,一键备份还原功能让系统维护更方便!
BIOS设置 win10教程 win7教程 U盘教程 xp教程 win8教程 电脑故障 电脑资讯 手机教程 软件教程 游戏攻略
当前位置:云骑士 > 使用教程 > 电脑资讯 > vue全家桶有哪些

vue全家桶有哪些

文案作者: 骑士
2019-07-26 19:59:25
播放量:

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

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

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

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

# 全局安装 vue-cli

$ npm install --global vue-cli

# 创建一个基于 webpack 模板的新项目

$ vue init webpack my-project

# 安装依赖,走你

$ cd my-project

$ npm install

$ npm run dev

二、vue-router

安装:npm installvue-router

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

import

Vue

from'vue'

import

VueRouter

from'vue-router'

Vue.use(VueRouter)

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

三、vuex

vuex为专门为vue.js应用程序开发的状态管理可以理解为全局的数据管理。vuex主要由五部分组成:state  action、mutation、getters、mudle组成。

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

1、state

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

获取state的两种方式例子:

1.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,而不是直接变更状态。

例如:

const store = new Vuex.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 的 参数解构来简化代码:

actions

:{

increment

({

commit

}){

commit('increment')

}

}

3、mutation

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

4、getters

Vuex 允许在 store 中定义“getter”(可以认为是 store 的计算属性)。就像计算属性一样,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

}

mapGetters 辅助函数

mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性:

四、axios

axios是一个http请求包,vue官网推荐使用axios进行http调用。

安装:

npm install axios --save

例子:

1.发送一个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);

});

什么是nfo文件
图文
什么是nfo文件
nfo是相当普遍的ASCII文字档案的副档名,它的内容包含主要档案的相关文字说明资讯。可以使用文字编辑器或是NFO专用的浏览器浏览NFO档案的内容。...
阅读:180 发布时间:2020-12-26
u盘安装win7系统详细教程
图文
u盘安装win7系统详细教程
想要用u盘安装win7系统,其实方法很简单的.制作好一个U盘启动盘和下载好系统镜像文件就可以u盘安装win7了.如果你实在不会,下面有U盘安装w7的详细过程....
阅读:2753 发布时间:2019-06-26
下厨房app怎么改昵称
图文
下厨房app怎么改昵称
首先打开手机里面的下厨房软件app,在主页面找到右下角的我并点击进入,接下来点击名称下面的添加厨房必需品,接着点击个人信息后面的编辑。...
阅读:469 发布时间:2020-01-11
win7开机黑屏怎么办
图文
win7开机黑屏怎么办
如果重启还是黑屏,就再次重启,直接F8安全模式启动进入桌面,进入系统后,同时按下win+R键打开输入命令栏直接输入:cmd,敲击回车,进入DOS界面,输入...
阅读:1124 发布时间:2021-01-07
iphone12外放听筒破音完美解决
图文
iphone12外放听筒破音完美解决
打开设置,点击辅助功能,点击音频/视觉,将单声道音频和电话降噪开启即可。...
阅读:4463 发布时间:2021-02-05
win7系统还原在哪里
win7系统还原在哪里
浏览:15987
2018-06-14
电脑反应慢是什么原因
电脑反应慢是什么原因
浏览:10481
2021-07-29
没光驱怎么重装电脑系统
没光驱怎么重装电脑系统
浏览:16052
2020-10-19
东芝笔记本重装系统教程
东芝笔记本重装系统教程
浏览:13299
2020-06-24
win7麦克风没声音怎么设置
win7麦克风没声音怎么设置
浏览:24228
2020-10-17

客服二维码

邮箱:toplearningteam#gmail.com (请将#换成@)

Copyright 2013-2020 云骑士( https://www.yunqishi.net/ ) 版权所有 All Rights Reserved   鄂ICP备2023010145号-1