devbox
IT小白
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

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

作者：IT小白 | 2024-05-26 03:45:11

赞

踩

es6-promise插件

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

目录

1、axios

2、babel-polyfill

3、core-js

4、echarts

5、element-ui

6、es6-promise

7、js-beautify

8、js-cookie

9、nprogress

10、promise-polyfill

11、qs

12、vue

1、axios

文章推荐  =>

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

2、babel-polyfill

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

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

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

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

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

情景 2 ：

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

下载 ： npm install --save babel-polyfill 

  1.   "dependencies": {
  2.     "babel-polyfill": "^6.26.0",
  3.   },

使用 ： 直接在代码中 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 方式

  1. // global version
  2. npm install --save core-js@3.18.3
  3. // version without global namespace pollution
  4. npm install --save core-js-pure@3.18.3
  5. // bundled global version
  6. npm install --save core-js-bundle@3.18.3

2.  按需导入或者全局导入

  1. // 导入所有新提案api
  2. import "core-js";
  3. // 唯一稳定的'core js' 功能 -es 和 web标准
  4. import "core-js/stable";
  5. // 仅支持稳定的ES功能
  6. import "core-js/es";
  7. // 只导入指定api
  8. import "core-js/features/set";
  9.  
  10. import "core-js/stable/set";
  11. import "core-js/es/set";

3.  使用 demo 

主要是因为 IE 浏览器无法兼容新的语法、api，所以就需要用到 core-js 进行 兼容性处理，从而解决问题。

  1. // first file:
  2. import 'core-js/modules/es.array.iterator';
  3. import 'core-js/modules/es.object.to-string';
  4. import 'core-js/modules/es.set';
  5. var set = new Set([1, 2, 3]);
  6.  
  7. // second file:
  8. import 'core-js/modules/es.array.of';
  9. var array = Array.of(1, 2, 3);

项目使用 ：

  1.   "dependencies": {
  2.     "core-js": "^3.6.5",
  3.   },

=>  在 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，

提供直观，交互丰富，可高度个性化定制的数据可视化图表。

  1.   "dependencies": {
  2.     "echarts": "^5.3.1",
  3.   },

文章推荐  =>

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

5、element-ui

网站快速成型工具

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

中文官网  =>  Element - The world's most popular Vue UI framework

  1.   "dependencies": {
  2.     "element-ui": "^2.15.6",
  3.   },

文章推荐  =>

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

6、es6-promise

  1.   "dependencies": {
  2.     "es6-promise": "^4.2.8",
  3.   },

7、js-beautify

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

网很多网站提供在线 js、html 格式化功能，都是基于 js-beautify 开发的。

  1.   "dependencies": {
  2.     "js-beautify": "^1.14.0",
  3.   },

js-cookie 是什么？
js-cookie 是一个简单的 , 轻量级的处理 cookies 的 js API ，

用来处理 cookie 相关的插件

js-cookie 的使用方法
一、下载安装

npm install --save js-cookie

  1. "dependencies": {
  2.   "core-js": "^3.8.3",
  3.   "element-ui": "^2.15.12",
  4.   "js-cookie": "^3.0.1"
  5. },

二、引入
安装好 js-cookie 插件后 ，在我们需要处理 cookie 的地方 ，

简单的通过 import 引入就可以使用了

import Cookies from 'js-cookie'

三、js-cookie 的 添加 获取 删除

1、添加 cookie

  1. // 创建一个名称为 name ，对应值为 value 的 cookie
  2. // 由于没有设置失效时间 ，默认失效时间为该网站关闭时
  3. Cookies.set(name, value)
  4.  
  5. // 创建一个有效时间为 7天的 cookie
  6. Cookies.set(name, value, { expires: 7 })
  7.  
  8. // 创建一个带有路径的 cookie
  9. Cookies.set(name, value, { path: '' })
  10.  
  11. // 创建一个value为对象的 cookie
  12. const obj = { name: 'ryan' }
  13. Cookies.set('user', obj)

2、获取 cookie

  1. // 获取指定名称的 cookie
  2. Cookies.get(name) // value
  3.  
  4. // 获取value为对象的 cookie
  5. const obj = { name: 'ryan' }
  6. Cookies.set('user', obj)
  7. JSON.parse(Cookies.get('user'))
  8.  
  9. // 获取所有 cookie
  10. Cookies.get()

3、删除 cookie

  1. // 删除指定名称的 cookie
  2. Cookies.remove(name) // value
  3.  
  4. // 删除带有路径的 cookie
  5. Cookies.set(name, value, { path: '' })
  6. Cookies.remove(name, { path: '' })

9、nprogress

  1.   "dependencies": {
  2.     "nprogress": "^0.2.0",
  3.   },

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、配置

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

4、使用

router / index.js

  1. // 导入
  2. import NProgress from 'nprogress'
  3. import 'nprogress/nprogress.css'
  4.  
  5. NProgress.configure({
  6.   showSpinner: false,
  7. })
  8.  
  9. router.beforeEach((to, from, next) => {
  10.   NProgress.start()
  11.   next()
  12. })
  13.  
  14. router.afterEach(() => {
  15.   NProgress.done()
  16. })

修改颜色 ：

在 App.vue 中的 style 中增加 ：

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

10、promise-polyfill

  1.   "dependencies": {
  2.     "promise-polyfill": "8.2.3",
  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

  1.   "dependencies": {
  2.     "qs": "6.10.3",
  3.   },

12、vue

  1.   "dependencies": {
  2.     "vue": "^2.6.11",
  3.   },

13、vue-beautify

14、vue-clipboard2

15、vue-router

16、vuedraggable

17、vuex

18、webpack-encoding-plugin

19、

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/IT小白/article/detail/625044
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号