vue全家桶

1.调试插件

   在vue调试方面,可以选择安装chrome插件vue Devtools。打开vue项目,在console控制台选择vue面板。在Devtools工具中,可以选择组件,查看对应组件内的数据信息。也可以选择Vuex选项,查看该项目内Vuex的状态变量信息。  

2.UI组件库

mint-ui,MUI都是不错的ui组件库

三.Vue有著名的全家桶系列,包含了vue-router,vuex, vue-resource。再加上构建工具vue-cli,就是一个完整的vue项目的核心构成。
3.vue-router路由

推荐使用npm工具来安装vue-router npm install vue-router -S

如果在一个模块化工程中使用它,必须要通过 Vue.use() 明确地安装路由功能。 通过const router= new VueRouter()来定义一个路由,并传入对应的配置,包括路径path和组件components。

最后,在使用newVue来创建和挂载vue根实例的时候,记得要通过
router配置参数注入路由,即在router中export出来的路由对象,从而让整个应用都有路由功能。

4.vuex状态管理

Vuex 的四个核心概念分别是: 

1️⃣The state tree:Vuex
使用单一状态树,用一个对象就包含了全部的应用层级状态。至此它便作为一个『唯一数据源(SSOT)』而存在。这也意味着,每个应用将仅仅包含一个
store 实例。单状态树让我们能够直接地定位任一特定的状态片段,在调试的过程中也能轻易地取得整个当前应用状态的快照。
2️⃣Getters:用来从 store 获取 Vue 组件数据。
3️⃣Mutators:事件处理器用来驱动状态的变化。
4️⃣Actions:可以给组件使用的函数,以此用来驱动事件处理器 mutations

Vuex和简单的全局对象是不同的,当Vuex从store中读取状态值的时候,若状态发生了变化,那么相应的组件也会高效的更新。并且,改变store中状态的唯一途径就是提交commit
mutations。这样便于我们跟踪每一次状态的变化。只要发生了状态的变化,一定伴随着mutation的提交。

5.vue-resource介绍

Vue-resource有体积小,支持promise特性的特点。同样推荐使用npm来安装Vue-resource。

$ npm install vue-resource

在安装并引入vue-resource后,可以基于全局的Vue对象使用http,也可以基于某个Vue实例使用http。

在发送请求后,使用then方法来处理响应结果,then方法有两个参数,第一个参数是响应成功时的回调函数,第二个参数是响应失败时的回调函数。

最后,vue + vuex+ vue-resource + vue-router + webpack + es6 + less的项目架构成为了越来越多大公司的第一选择。

你可能感兴趣的:(vue全家桶)