本教程技术重点:vue.js 全家是什么 vue.js 全家完整 vue

vue.js全家桶是什么

作者:神秘网友发布时间:2020-11-25 13:00:25

vue.js全家桶是什么

vue.js全家桶是完整的vue项目的核心构成，包括vue-router、vuex、vue-resource、vue-cli和sass样式。vue-cli是快速构建单页应用的脚手架。

vue.js全家桶是什么

vue全家桶：

包含了vue-router，vuex，vue-resource，再加上构建工具vue-cli，sass样式，这些是一个完整的vue项目的核心构成。

（学习视频分享：javascript视频教程）

概括起来就是：

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 的参数解构来简化代码（特别是我们需要调用 commit 很多次的时候）：

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);
});

vue.js全家桶是什么相关教程

jar是什么文件

jar文件是一种归档文件，以zip格式构建，以.jar为文件扩展名。它通常用于聚合大量的java类文件、相关的元数据和资源文件到一个文件，以便开发java平台应用软件或库。 jar文件介绍：在软件领域，JAR文件（Java归档，英语：Java Archive）是一种软件包文件格
vue中Mint UI是什么

在vue中，Mint UI是饿了么团队开源的一款基于Vue.js的移动端组件库。Mint UI包含丰富的CSS和JS组件，能够满足日常的移动端开发需要；通过它，可以快速构建出风格统一的页面，提升开发效率。 Mint UI是饿了么团队开源的一款基于Vue.js 的移动端组件库。官网
jquery与ajax的区别是什么

jquery与ajax的区别：1、Ajax是一门技术，它提供了异步更新的机制，使用客户端与服务器间交换数据而非整个页面文档，实现页面的局部更新；2、jQuery是一个库，它对JS进行了封装，使其更方便使用。改方法适用于所有品牌电脑 jquery与ajax的区别： AJAX AJAX
css强制文字不换行代码是什么

css强制文字不换行代码是“div{white-space:nowrap;}”，其中white-space属性设置如何处理元素内的空白，而属性值normal就是使空白被浏览器忽略。推荐：《css视频教程》该方法适用于任何品牌的电脑。 css强制文字不换行实现代码强制不换行，直接使用white
vue.js中指令的作用是什么

在vue.js中，指令是带有“v-”前缀的特殊特性，作用是：当表达式的值改变时，将其产生的连带影响，响应式地作用于DOM；将指令绑定在元素上时，指令会为绑定的目标元素添加一些特殊的行为。 vue.js指令是什么？作用是什么？ Vue.js指令 (Directives) 是带有 v
jQueryEasyUI是什么

jQueryEasyUI是一组基于jquery的UI插件集合体，它的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。EasyUI支持两种渲染方式，分别是javascript方式和html标记方式。介绍： jQuery EasyUI是一组基于jQuery的UI插件集合体，而jQuery EasyUI的
react中的refs是什么

react中的refs是react支持的一种特殊属性，这个特殊属性允许我们引用render()返回的相应的支撑实例。这样我们就可以确保在任何时间总是拿到正确的实例。环境：本文适用于所有品牌的电脑。（学习视频分享：react教程）属性介绍： React 支持一种非常特殊
bootstrap删格系统是什么

bootstrap删格系统是指Bootstrap中内置的一套响应式、移动设备优先的流式栅格系统，随着屏幕设备或视口尺寸的增加，系统会自动分为最多12列；其实现原理是通过定义容器大小，平分12份，再调整内外边距，最后结合媒体查询实现网格系统。推荐：《bootstrap教