【Vue】全家桶介绍

大家好，欢迎来到IT知识分享网。

概述

Vue全家桶一般来说包括主体Vue.Js、开发插件vue-devtools、项目构建工具vue-cli、路由管理器vue-Router、状态管理模式vuex、网络请求库Axios、ui框架、打包工具webpack，接下来开始一一介绍。

核心：Vue.Js

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

详情参阅：vue.js官网

浏览器开发插件：vue-devtools

vue-devtools是一款基于chrome游览器的插件，可以用于调试vue应用，也可以用来辅助我们找到各页面对应的Vue.js文件路径，这将极大地提高我们的开发和调试效率。

详情参阅：【Vue】全家桶之vue-devtools

项目构建工具：vue-cli

Vue.js+webpack的项目模板。Vue cli提供了强大的功能，用于定制新项目、配置原型、添加插件和检查webpack配置。@vue/cli 3.x版本可以通过vue create命令快速创建一个 新项目的脚手架，不需要像vue 2.x那样借助于webpack来构建项目。

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

详情参阅：【Vue】全家桶之vue-cli

更新的构建工具：【Vue】全家桶之Vite

路由管理器 ： vue-Router

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

vue Router安装代码

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

详情参阅：【Vue】全家桶之vue-Router

状态管理模式：vuex

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

npm install vuex --save 

详情参阅：【Vue】全家桶之Vuex

更新的状态管理：【Vue】全家桶之Pinia

网络请求库：Axios

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

安装方式

npm install axios 

或直接引用：

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

详情参阅：【Vue】全家桶之Axios

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 桌面端中后台组件库。

详情参阅：Element

打包工具： webpack

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

npm install webpack -g 

详情参阅：【Vue】全家桶之webpack

来源