vue全家桶

一、vue-cli

vue-cli也叫脚手架，官方定义为Vue.js 开发的标准工具！相比scirpt标签引入，脚手架具有如下特点：

• 功能丰富

        对 Babel、TypeScript、ESLint、PostCSS、PWA、单元测试和 End-to-end 测试提供开箱即用的支持。

• 易于扩展

          它的插件系统可以让社区根据常见需求构建和共享可复用的解决方案。

• 无需 Eject

          Vue CLI 完全是可配置的，无需 eject。这样你的项目就可以长期保持更新了。

• CLI 之上的图形化界面

        通过配套的图形化界面创建、开发和管理你的项目。

• 即刻创建原型

            用单个 Vue 文件即刻实践新的灵感。

• 面向未来

     为现代浏览器轻松产出原生的 ES2015 代码，或将你的 Vue 组件构建为原生的 Web Components 组件。

二、vueRouter

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：

• 1）嵌套的路由/视图表
• 2）模块化的、基于组件的路由配置
• 3）路由参数、查询、通配符
• 4）基于 Vue.js 过渡系统的视图过渡效果
• 5）细粒度的导航控制
• 6）带有自动激活的 CSS class 的链接
• 7）HTML5 历史模式或 hash 模式，在 IE9 中自动降级
• 8）自定义的滚动条行为

三、vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

什么情况下我应该使用 Vuex？
Vuex 可以帮助我们管理共享状态，并附带了更多的概念和框架。这需要对短期和长期效益进行权衡。

• state

　　　　vuex的基本数据，用来存储变量

• getters

　　　　从基本数据(state)派生的数据，相当于state的计算属性

• mutations

　　　　 提交更新数据的方法，必须是同步的(如果需要异步使用action)。每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。

　　　　回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数，提交载荷作为第二个参数。

• actions

　　　　和mutation的功能大致相同，不同之处在于 ==》1. Action 提交的是 mutation，而不是直接变更状态。 2. Action 可以包含任意异步操作。

• modules

             模块化vuex，可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理。

如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单，您最好不要使用 Vuex。一个简单的 store 模式就足够您所需了。但是，如果您需要构建一个中大型单页应用，您很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择。

四、Axios

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。
特性

• 1）从浏览器中创建 XMLHttpRequests
• -2）从 node.js 创建 http 请求
• 3）支持 Promise API
• 4）拦截请求和响应
• 5）转换请求数据和响应数据
• 6）取消请求
• 7）自动转换 JSON 数据
• 8）客户端支持防御 XSRF

五、搭配UI框架如：iview、vant、elementUI

- **iview** 一套基于 Vue的高质量UI 组件库(分为小程序和pc端等不同版本)；
- **vant** 轻量、可靠的移动端 Vue 组件库,是有赞开源的一套基于 Vue 2.0 的 Mobile 组件库,旨在更快、更简单地开发基于 Vue 的美观易用的移动站点。
- **elementUI** 是基于 Vue 2.0 桌面端中后台组件库。