Vue全家桶

Posted 2022-10-21 阿沫夕霖

Vue全家桶

全家桶，顾名思义，是对于开发一个完整的中大型单页面应用项目所必须的插件和框架
一个完整的vue项目的核心构成包含了vue-router，vuex，vue-resource/axios，以及构建工具vue-cli。

一，Vue-router

Vue-router是Vue.js官方的路由管理器

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

二，Vuex

Vuex是一个专为Vue.js 应用程序开发的状态管理模式，它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化

什么情况下我应该使用 Vuex？
Vuex 可以帮助我们管理共享状态，并附带了更多的概念和框架。这需要对短期和长期效益进行权衡。如果您不打算开发大型单页应用，使用 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

vue-resource和axios的区别（为什么使用axios）
vue-resource是vue插件。主要用于vue里面使用。而axios是一个http请求库。不论是vue还是react里面都能使用。而且axios兼容后端在node服务端也可以使用。所以目前来看axios是首选。

四，Vue-cli

Vue-cli又称为脚手架，是官方定义的Vue.js的开发标准工具。

特点：
1）功能丰富
对 Babel、TypeScript、ESLint、PostCSS、PWA、单元测试和 End-to-end 测试提供开箱即用的支持。
2）易于扩展
它的插件系统可以让社区根据常见需求构建和共享可复用的解决方案。
3）无需 Eject
Vue CLI 完全是可配置的，无需 eject。这样你的项目就可以长期保持更新了。
4）CLI 之上的图形化界面
通过配套的图形化界面创建、开发和管理你的项目。
5）即刻创建原型
用单个 Vue 文件即刻实践新的灵感。
6）面向未来
为现代浏览器轻松产出原生的 ES2015 代码，或将你的 Vue 组件构建为原生的 Web Components 组件。