vue全家桶是指什么？有哪些东西？

今天药忘吃喽~ 2024-04-06 14:09 59阅读 0赞

![ff3b208d05036b322b23fabd3455d764.png][]

**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
    # OR
    yarn global add @vue/cli
    
    //安装完成后创建一个项目，vue ui为图形化构建，相对简单（推荐）
    vue create my-project
    # OR
    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

或者直接引入

<pre class="brush:html;toolbar:false;">npm install axios</pre>

### 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

以上是为大家介绍了“vue全家桶”，希望对大家有所帮助。如果你在学习打算学习Vue，推荐学习面《[vue.js教程：vue2.0+vue3.0全套视频教程][vue.js_vue2.0_vue3.0]》

**免费获取vue2.0+vue3.0全套视频教程+笔记+源码**。

[ff3b208d05036b322b23fabd3455d764.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/68499b3fad9e429f828dd41526e1d72c.png
[vue.js_vue2.0_vue3.0]: https://www.itcast.cn/news/20211202/1538085593.shtml?webzly