vue2常用工具链

Vuejs

描述：vue应用的核心，采用自底向上增量开发的设计开发，关注视图层，需要配合其他现有的库完成应用构建，目前已经有一套自己的生态。

需要关注的点

• 生命周期
• 计算属性
• props(表单验证)
• transition
• api

vue-router

描述：用于配置单页面应用的组件和映射，使用的方式和ui-router类似，支持嵌套路由，正则匹配路由，参数传递，history模式

需要关注的点

• 懒加载
• 路由信息对象
• 组件导航钩子

注意：将router注入vue根组件的实例之后，可以在各个组件内部使用this.$route调用router的属性

vue-resource

描述：类似于$http的存在，为vue应用的前后端交互提供了大量api，支持Promise，可以制作'拦截器'

需要关注的点

• http请求的方式和参数携带方式
• resource服务
• 拦截器

vuex

描述：Vuex 是一个专门为 Vue.js 应用设计的 状态管理模型 + 库。它为应用内的所有组件提供集中式存储服务，其中的规则确保状态只能按预期方式变更。

vue开发中，我们将各个组件公用的变量提取到vuex的单一状态树中，即state,这些变量在应用的每时每刻都只存在一种状态，并且每个组件都可以调用，下图中，vue组件通过发出(dispatch)action,action响应后与后端api进行交互，完成之后，将数据提交(commit)给mutation,mutation将突变(mutate)传递给state,state改编后，会响应视图。

vuex数据单向数据流

需要关注的点

• state
• actions
• mutations
• getters
• modules
  注意：将store注入vue根组件的实例之后，可以在各个组件内部使用this.$store调用action，mutation，state

element

描述：element是饿了么团队为开发者、设计师和产品经理准备的一套基于 Vue 2.0 的组件库，提供了配套设计资源，帮助你的网站快速成型。

需要关注的点

• 大量组件和api的灵活使用