记录项目 package.json 文件中各插件的使用 ：
目录
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.32. 按需导入或者全局导入
// 导入所有新提案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", },
文章推荐 =>
5、element-ui
网站快速成型工具
Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库
中文官网 => Element - The world's most popular Vue UI framework
"dependencies": { "element-ui": "^2.15.6", },
文章推荐 =>
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、js-cookie
js-cookie 是什么？
js-cookie 是一个简单的 , 轻量级的处理 cookies 的 js API ，用来处理 cookie 相关的插件
js-cookie 的使用方法
一、下载安装npm install --save js-cookie"dependencies": { "core-js": "^3.8.3", "element-ui": "^2.15.12", "js-cookie": "^3.0.1" },二、引入
安装好 js-cookie 插件后 ，在我们需要处理 cookie 的地方 ，简单的通过 import 引入就可以使用了
import Cookies from 'js-cookie'三、js-cookie 的 添加 获取 删除
1、添加 cookie
// 创建一个名称为 name ，对应值为 value 的 cookie // 由于没有设置失效时间 ，默认失效时间为该网站关闭时 Cookies.set(name, value) // 创建一个有效时间为 7天的 cookie Cookies.set(name, value, { expires: 7 }) // 创建一个带有路径的 cookie Cookies.set(name, value, { path: '' }) // 创建一个value为对象的 cookie const obj = { name: 'ryan' } Cookies.set('user', obj)2、获取 cookie
// 获取指定名称的 cookie Cookies.get(name) // value // 获取value为对象的 cookie const obj = { name: 'ryan' } Cookies.set('user', obj) JSON.parse(Cookies.get('user')) // 获取所有 cookie Cookies.get()3、删除 cookie
// 删除指定名称的 cookie Cookies.remove(name) // value // 删除带有路径的 cookie Cookies.set(name, value, { path: '' }) Cookies.remove(name, { path: '' })
9、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; // 自定义颜色 }
10、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>
11、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", },
12、vue
"dependencies": { "vue": "^2.6.11", },
13、vue-beautify
14、vue-clipboard2
15、vue-router
16、vuedraggable
17、vuex
18、webpack-encoding-plugin
19、
扫一扫
7550
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
