vue全家桶有哪些 |
您所在的位置:网站首页 › 更新vue-cli › vue全家桶有哪些 |
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); }); 首页 > 软件教程 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |