Vue常用集成插件

冷不防 2022-04-10 11:59 394阅读 0赞

本篇文章仅做记录，方便以后使用

一、axios

基于promise用于浏览器和node.js的http客户端

## 特点 ##

安装：项目中安装(npm install axios --save)

*  支持浏览器和node.js
 *  支持promise
 *  能拦截请求和响应
 *  能转换请求和响应数据
 *  能取消请求
 *  自动转换JSON数据
 *  浏览器端支持防止CSRF(跨站请求伪造)

$ npm install axios

使用方法[https://www.jianshu.com/p/bbc455d86a22][https_www.jianshu.com_p_bbc455d86a22]

二、 vue-router

[Vue.js][]官方的路由管理器

包含的功能有：

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

三、babel-polyfill

Babel是一个广泛使用的转码器

可以将ES6代码转为ES5代码，从而可以在现有环境执行，所以我们可以用ES6编写，而不用考虑环境支持的问题；  
       有些浏览器版本的发布早于ES6的定稿和发布，因此如果在编程中使用了ES6的新特性，而浏览器没有更新版本，或者新版本中没有对ES6的特性进行兼容，那么浏览器就会无法识别ES6代码，例如IE9根本看不懂代码写的let和const是什么东西？只能选择报错，这就是浏览器对ES6的兼容性问题；

四、countup.js

**CountUp.js是一个无依赖，轻量级的JavaScript“类”，可用于快速创建以更有趣的方式显示数字数据的动画。**

五、echarts

ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的矢量图形库 [ZRender][]，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

六、echarts-gl

ECharts GL （后面统一简称 GL）为 ECharts 补充了丰富的三维可视化组件

七、heatmap.js

热力图实现

八、iview

iView 是一套基于 Vue.js 的开源 UI 组件库，主要服务于 PC 界面的中后台产品。

npm安装

npm install iview --save

使用方法:[https://www.jianshu.com/p/bbc455d86a22][https_www.jianshu.com_p_bbc455d86a22]

九、jquery

一个快速、简洁的JavaScript框架

十、less

Less 的出现是为了解决 CSS 中过于呆板的写法，Less = 变量 + 混合 + 函数。

十一、less-loader

`less-loader` 用于处理编译 `.less` 文件，将其转为 `css`文件代码。

使用 `less-loader` 的话，必须安装 `less`，单独一个 `less-loader` 是没办法正常使用的。

> 安装

npm install --save less-loader less

十二、 mockjs

一个模拟数据，生成随机数据，拦截ajax请求。

## 为什么使用mockjs ##

1、后端给不了数据  
2、数据太长，将数据放在js文件里面，完成后挨个改url  
3、还原真实数据  
4、特殊格式 ip 随机数 图片 地址  
5、分页显示

十三、postcss-cssnext

`postcss-cssnext` 是一个插件的集合, 其中通过 `postcss-custom-properties` 插件处理自定义变量的特性, 但这个插件只能处理 :root 下的 变量

在使用`postcss-cssnext`时就不要使用autoprefixer插件，因为`postcss-cssnext`包含了`autoprefixer`插件

十四、signals

js-signals是用于在JavaScript中的软件组件之间定义和触发基于事件的消息的库，它是一个类似于Event Emitter / Dispatcher或Pub / Sub系统的事件/消息系统，主要区别在于每个事件类型都有自己的控制器功能，而不依赖于字符串来广播/订阅事件，它还具有通常在其他系统上不可用的一些额外功能。

十五、vue-area

## Install ##

npm install vue-area --save

省市区联动显示

十六、vue-awesome-swiper

npm install  vue-awesome-swiper

是一个滑动、轮播组件

十七、[*vue* *countup*js][vue_countup_js]

[实现数字自动增加动画 ][vue_countup_js]

十八、vuex

npm install vuex --save

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

Vuex 解决了`多个视图依赖于同一状态`和`来自不同视图的行为需要变更同一状态`的问题，将开发者的精力聚焦于数据的更新而不是数据在组件之间的传递上

具体使用详见[https://segmentfault.com/a/1190000015782272][https_segmentfault.com_a_1190000015782272]

[https_www.jianshu.com_p_bbc455d86a22]: https://www.jianshu.com/p/bbc455d86a22
[Vue.js]: http://cn.vuejs.org/
[ZRender]: https://github.com/ecomfe/zrender
[vue_countup_js]: http://www.baidu.com/link?url=yn1M4GenoGbwAIqVMROPraT9PyoyUzgmHsJDQomaRFxUkfkLFCtxx3Aynnl914_qwI10u4vlYO9Gnn-Qgow9ya
[https_segmentfault.com_a_1190000015782272]: https://segmentfault.com/a/1190000015782272