vue全家桶有哪些

vue全家桶有：

• Vue-cli，也叫脚手架，基于Vue.js进行快速开发的完整系统；
• vue-router，vue官方的路由管理器；
• vuex，为vue应用程序开发的状态管理模式；
• axios，基于Promise用于浏览器和node.js的HTTP客户端

常用UI框架

一、Vue-cli

脚手架目录概览
vue-cli 也叫脚手架，官方定义为Vue.js 开发的标准工具！能够快速搭建一个完整的项目的结构。

脚手架的作用：

• 减少时间，不必从零开始搭建初始项目，提高开发效率。

• 便于多人协作。

• 项目更新同步方便，只需要更新代码库中项目模板，即可下载最新的项目。

相比scirpt标签引入，脚手架具有如下特点：

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

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

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

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

5. 即刻创建原型
用单个 Vue 文件即刻实践新的灵感。

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

安装：cmd找到项目文档下操作以下代码

npm install -g @vue/cli
# OR
yarn global add @vue/cli
 
//安装完成后创建一个项目，vue ui为图形化构建，相对简单（推荐）
vue create my-project
# OR
vue cli

二、vue-router

vue-router路由模式
vue-router路由传参方式
route好router的区别
Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：

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

安装：

npm install vue-router
//安装后在main.js引入
import VueRouter from 'vue-router'
Vue.use(VueRouter)

三、vuex

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

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

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

安装：

npm install vuex --save

vuex 和 localstorage区别：

• 最重要的区别：vuex存储在内存，localstorage则以文件的方式存储在本地
• 应用场景：vuex用于组件之间的传值，localstorage则主要用于不同页面之间的传值。
• 永久性：当刷新页面时vuex存储的值会丢失，localstorage不会。
• localStorage用来存储需要持久化的数据，vuex启动时直接从localstorage获取持久化的数据就实现了应用的持久化的需求

四、axios

ajax和axios区别及优缺点
Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

特性：

• 从浏览器中创建 XMLHttpRequests
• 从 node.js 创建 http 请求
• 支持 Promise API
• 拦截请求和响应
• 转换请求数据和响应数据
• 取消请求
• 自动转换 JSON 数据
• 客户端支持防御 XSRF

安装方法：

npm install axios

五、常用UI框架

iView 一套基于 Vue的高质量UI 组件库(分为小程序和pc端等不同版本)；

vant 轻量、可靠的移动端 Vue 组件库,是有赞开源的一套基于 Vue 2.0 的 Mobile 组件库，旨在更快、更简单地开发基于 Vue 的美观易用的移动站点。目前 Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本，并由社区团队维护 React 版本和支付宝小程序版本。

Ant Design antd是基于 Ant Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。蚂蚁集团

element-UI 是基于 Vue 2.0 桌面端中后台组件库。