Vue全家桶

Vue全家桶一般来说指的是脚手架vue-cli、路由vue-Router、状态管理模式vuex、Axios、elementUI等ui框架和打包工具webpack，下面我们分别介绍。

1. 项目构建工具：vue-cli

 

vue-cli也叫脚手架，官方定义为Vue.js开发的标准工具。Vue-cli是一个基于Vue.js进行快速开发的完整系统，可以自动生成Vue.js+webpack的项目模板。Vue cli提供了强大的功能，用于定制新项目、配置原型、添加插件和检查webpack配置。@vue/cli 3.x版本可以通过vue create命令快速创建一个 新项目的脚手架，不需要像vue 2.x那样借助于webpack来构建项目。

相比scirpt标签引入，vue-cli脚手架具有一下特点：

1)功能丰富

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

2)易于扩展

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

3)无需 Eject

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

4)CLI 之上的图形化界面

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

5)即刻创建原型

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

6)面向未来

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

安装

npm install -g @vue/cli

或者

yarn global add @vue/cli

 

//安装完成后创建一个项目，vue ui为图形化构建，相对简单（推荐）

vue create my-project

或者

vue ui

2. 路由管理器：vue-Router

 

vue-router是Vue官方推出的路由管理器，主要用于管理URL，实现URL和组件的对应，以及通过URL进行组件之间的切换，从而使构建单页面应用变得更加简单。主要有以下特点：

1)嵌套的路由/视图表

2)模块化的、基于组件的路由配置

3)路由参数、查询、通配符

4)基于 Vue.js 过渡系统的视图过渡效果

5)细粒度的导航控制

6)带有自动激活的 CSS class 的链接

7)HTML5 历史模式或 hash 模式，在 IE9 中自动降级

8)自定义的滚动条行为

vue Router安装代码

npm install vue-router

//安装后在mainjs引入

import VueRouter from 'vue-router'

 

Vue.use(VueRouter)

3. 状态管理模式：vuex

 

在一些大型项目中，有时我们会遇到单页面中包含着大量的组件及复杂的数据结构，而且可能各组件还会互相影响各自的状态，在这种情况下组件树中的事件流会很快变得非常复杂，也使调试变得异常困难。为了解决这一问题，引入了Vuex这种状态管理模式，Vuex是状态管理模式的一种实现库，主要以插件的形式和Vue.js进行配合使用，能够使我们在Vue.js中管理复杂的组件事件流。

vuex安装方法

npm install vuex --save

4. Axios

 

Axios是一个基于promise的HTTP库，简单的讲就是可以发送get、post请求。

Axios特性

1)从浏览器中创建 XMLHttpRequests

2)从 node.js 创建 http 请求

3)支持 Promise API

4)拦截请求和响应

5)转换请求数据和响应数据

6)能够取消请求

7)自动转换 JSON 数据

8)客户端支持防御 XSRF

安装方法

npm install axios

5. UI框架：iview、vant、elementUI等框架

 

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

vant 轻量、可靠的移动端 Vue 组件库，是有赞开源的一套基于 Vue 2.0 的 Mobile 组件库，旨在更快、更简单地开发基于 Vue 的美观易用的移动站点。

Ant Design Vue 是 Ant Design 的 Vue 实现，开发和服务于企业级后台产品。

elementUI 是基于 Vue 2.0 桌面端中后台组件库。

6. 打包工具：webpack

 

webpack是一个模块打包工具，可以把前端项目中的js、cs、scss/less、图片等文件都打包在一起，实现自动化构建，给前端开发人员带来了极大的便利。

安装方法

npm install webpack -g