记录Vue项目中使用的各插件

记录项目 package.json 文件中各插件的使用：

1、axios

2、babel-polyfill

3、core-js

4、echarts

5、element-ui

6、es6-promise

7、js-beautify

8、nprogress

9、promise-polyfill

10、qs

11、vue

1、axios

文章推荐 =>

axios 的理解和使用_雨季mo浅忆的博客-CSDN博客_axios理解

2、babel-polyfill

这个插件自我感觉是为了方便我们 解决兼容性 问题的，

因为我起手的项目当时就是因为在 IE浏览器 内出现了报错，

而谷歌浏览器正常运行且无报错，后来经百度搜查，

下载使用了这个插件后就解决了当时的问题

如果想看具体问题描述的话，可自行转文章 =>

情景 2 ：

重构之处理IE浏览器兼容问题_雨季mo浅忆的博客-CSDN博客_ie兼容性处理

下载： npm install --save babel-polyfill
  "dependencies": {"babel-polyfill": "^6.26.0",},
使用：直接在代码中 require ，或者在 webpack 的 entry 中添加，

也可以在 babel 的 env 中设置 useBuildins 为 true 来开启。

=> 在 main.js 里面加入 import 'babel-polyfill'

3、core-js

前言：

这里就和大家说一下 core-js 的开发者，也是网上查阅的资料。

core-js 的作者：一位彪悍的俄罗斯程序员，名字叫 丹尼斯·普什卡列夫（Denis Pushkarev）。

一、core-js 到底是什么？
1. ECMAScript 的迅速成长以及浏览器的频繁更新换代，每年会出现 新的 api ，

举个例子：es6 时期诞生的 'Promise' ，'Set' 或者是 'es7' 数组新提供的

方法 'includes' , 这些新加入的 'api' ，就引出一个词 "polyfill"：' polyfill ( 垫片 / 补丁 ) '

就是用社区上提供的一段代码，让我们在不兼容某些新特性的浏览器上，使用该新特性。

新功能的 es 'api' 转换为大部分现代浏览器都可以支持运行的一个 'api' 补丁包集合。

2. 因为官方库对他介绍的形容
2.1. 它支持最新的 ECMAScript 标准
2.2. 它支持 ECMAScript 标准库提案
2.3. 它支持一些 WHATWG / W3C 标准（跨平台或者 ECMAScript 相关）
2.4. 它最大限度的模块化：你能仅仅加载你想要使用的功能
2.5. 它能够不污染全局命名空间
2.6. 它和 babel 紧密集成：这能够优化 core-js 的导入
2.7. 它是最普遍、最流行的给 JavaScript 标准库打补丁的方式

二、core-js 相关功能包

详情地址：

core-js/packages at master · zloirock/core-js · GitHub

在 'core-js' 的工程项目的 packages 文件中

'https://github.com/zloirock/core-js/tree/master/packages'，

能看到五个相关包：
1.1、'core-js' 安装 'npm install core-js' ，作用： ' 定义全局的 polyfill '

1.2、'core-js-pure' 安装 'npm i core-js-pure' ，作用： ' 提供不污染全局环境的 polyfill ，

等价于 core-js@2/library '

1.3、'core-js-compat' 安装 'npm i core-js-compat' ，作用：维护了按照 ' browserslist '

规范的垫片需求数据，来帮助我们找到 '符合目标环境' 的 'polyfills' 需求集合

1.4、'core-js-builder' 安装 'npm i core-js-builder' ，作用：可以被 Node.js 服务使用，

构建出不同场景的垫片包。

1.5、'core-js-builder' 安装 'npm i core-js-builder' ，作用：可以结合 'core-js-compact'

以及 'core-js'，并利用 'webpack' 能力，根据需求打包出 core-js 代码

三、如何使用？

1. 安装 npm 方式
// global version
npm install --save core-js@3.18.3
// version without global namespace pollution
npm install --save core-js-pure@3.18.3
// bundled global version
npm install --save core-js-bundle@3.18.3
2. 按需导入或者全局导入
// 导入所有新提案api
import "core-js";
// 唯一稳定的'core js' 功能 -es 和 web标准
import "core-js/stable";
// 仅支持稳定的ES功能
import "core-js/es";
// 只导入指定api
import "core-js/features/set";import "core-js/stable/set";
import "core-js/es/set";
3. 使用 demo

主要是因为 IE 浏览器无法兼容新的语法、api，所以就需要用到 core-js 进行 兼容性处理，从而解决问题。
// first file:
import 'core-js/modules/es.array.iterator';
import 'core-js/modules/es.object.to-string';
import 'core-js/modules/es.set';
var set = new Set([1, 2, 3]);// second file:
import 'core-js/modules/es.array.of';
var array = Array.of(1, 2, 3);
项目使用：
  "dependencies": {"core-js": "^3.6.5",},
=> 在 main.js 里面引入 import 'core-js/stable' // 解决 IE 浏览器不兼容新的 api 问题

4、echarts

Apache ECharts

ECharts 是一款基于 JavaScript 的数据可视化图表库，

提供直观，生动，可交互，可个性化定制的数据可视化图表。

官方网址 => Apache ECharts

主要功能：

ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，

用于统计的盒形图，

用于地理数据可视化的地图、热力图、线图，

用于关系数据可视化的关系图、treemap、旭日图，

多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，

并且支持图与图之间的混搭。

运行环境：

ECharts，一个使用 JavaScript 实现的开源可视化库，

可以流畅的运行在 PC 和移动设备上，

兼容当前绝大部分浏览器（ IE8/9/10/11，Chrome，Firefox，Safari 等），

底层依赖矢量图形库 ZRender，

提供直观，交互丰富，可高度个性化定制的数据可视化图表。
  "dependencies": {"echarts": "^5.3.1",},
文章推荐 =>

ECharts可视化图表库之初使用_雨季mo浅忆的博客-CSDN博客_echarts库

5、element-ui

网站快速成型工具

Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库

中文官网 => Element - The world's most popular Vue UI framework
  "dependencies": {"element-ui": "^2.15.6",},
文章推荐 =>

Element UI _ 疑难杂症_雨季mo浅忆的博客-CSDN博客_elementui的缺点

6、es6-promise

  "dependencies": {"es6-promise": "^4.2.8",},

7、js-beautify

js-beautify 是一款前端美化工具，支持 html、js、css 的自动化排版

网很多网站提供在线 js、html 格式化功能，都是基于 js-beautify 开发的。
  "dependencies": {"js-beautify": "^1.14.0",},

8、nprogress

  "dependencies": {"nprogress": "^0.2.0",},

NProgress 是页面跳转时出现在浏览器顶部的 进度条。

官方网址： NProgress: slim progress bars in JavaScript

GitHub 网站： GitHub - rstacruz/nprogress: For slim progress bars like on YouTube, Medium, etc

如下图所示，绿色的进度条就是 NProgress 实现的效果

1、安装

$ npm install --save nprogress

或者 $ yarn add nprogress

2、用法

NProgress.start(); — 显示进度条

NProgress.done(); — 完成进度条

3、配置

NProgress.configure 配置
通过 minimum 来修改最小百分比
NProgress.configure({ minimum: 0.1 });通过 ease(一个 CSS 中的 easing 值) 调整动画设置和速度 speed （毫秒ms）
NProgress.configure({ ease: ‘ease’, speed: 500 });关闭进度条步进，设置 trickle 为 false。
NProgress.configure({ trickle: false });调整 trickleRate (每次步进增长多少) 和 trickleSpeed (步进间隔，单位毫秒ms)
NProgress.configure({ trickleRate: 0.02, trickleSpeed: 800 });禁用进度环，设置 showSpinner 为 false
NProgress.configure({ showSpinner: false });

4、使用

router / index.js

// 导入
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'NProgress.configure({showSpinner: false,
})router.beforeEach((to, from, next) => {NProgress.start()next()
})router.afterEach(() => {NProgress.done()
})

修改颜色：

在 App.vue 中的 style 中增加：

// 在 NProgress.start(); 函数前，改变样式的颜色 ：#nprogress .bar {background: red !important; // 自定义颜色
}

9、promise-polyfill

  "dependencies": {"promise-polyfill": "8.2.3",},
无极填充

用于浏览器和节点的轻量级 ES6 Promise polyfill。

严格遵守规范。它是完美的 polyfill IE 或任何其他不支持本机 Promise 的浏览器。

它非常轻巧。

< 1kb 压缩浏览器支持 IE8 +，Chrome，Firefox，IOS 4 +，Safari 5 +，Opera NPM >

使用 npm install promise-polyfill --save-exact

凉亭使用 bower install promise-polyfill

CDN Polyfill 使用

如果浏览器还没有 window.Promise 它将设置一个全局 Promise 对象。

<script src =" https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min>

10、qs

之前用 Vue + element 写了一个后台管理系统，

在登录时使用 axios 请求数据传参时无法正常的获取数据。

之后百度发现原因是传递参数要将参数序列化。

这里使用了 qs 插件 ：

简单来说，qs 是一个增加了一些安全性的查询字符串解析和序列化字符串的库。

在项目中使用命令行工具输入：npm install qs 安装完成后

在需要用到的组件中：import qs from’qs’

具体使用中我查看了：qs.parse() 和 qs.stringify() 这两种方法虽然都是序列化，

但是还是有区别的。 qs.parse() 是将 URL 解析成对象的形式

qs.stringify() 是将对象序列化成 URL
  "dependencies": {"qs": "6.10.3",},

11、vue

  "dependencies": {"vue": "^2.6.11",},

12、vue-beautify

13、vue-clipboard2

14、vue-router

15、vuedraggable

16、vuex

17、webpack-encoding-plugin

18、