程序员经验分享-hwhale

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

2023-05-16

记录项目  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 

  "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、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、

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

vue

项目中使用的各插件

记录Vue项目中使用的各插件 的相关文章

  • 解决vxe-table复选框翻页选中问题

    解决vxe table复选框翻页选中问题 根据vxe table官方文档 想要保留勾选中的数据 我们的代码中需要设置 row id 和 checkbox config中的 reserve 属性 vxe table官方文档 简单写下html部

  • Vue学习（五）登陆页面之重置和发起登陆请求及弹窗提示

    Vue学习 五 登陆页面之重置和发起登陆请求及弹窗提示 表单重置 根据预验证结果决定是否发出登陆请求 编写代码 启动api服务器 弹窗提示 表单重置 直接调用element ui给我们写好的函数就可以了 获取当前表单的实例对象 通过这个实例

  • 包管理工具那么多，怎么选？npm、yarn 和 pnpm 三者比较及使用详解！

    1 简介 在 Vue 项目中 我们需要使用许多第三方依赖库 如 Vue Router Vuex Axios Element UI 等等 这些依赖库通常以 NPM 包的形式提供 而且在使用时需要进行版本管理 因此 我们需要使用一个包管理工具来

  • ip正则表达式

    var Sip rule value callback gt if 2 5 0 5 0 4 d 0 1 d 1 2 2 5 0 5 0 4 d 0 1 d 1 2 3 test value false callback new Error

  • 值得收藏的UmiJS 教程

    点击上方关注 前端技术江湖 一起学习 天天进步 前言 网上的umi教程是真的少 很多人都只写了一点点 很多水文 所以打算自己写一篇 自己搭建umi 并封装了一下常用的功能 并用到公司实际项目中 umi介绍 Umi 是什么 Umi 中文可发音

  • 前端大屏常用的适配方案

    假设我们正在开发一个可视化拖拽的搭建平台 可以拖拽生成工作台或可视化大屏 或者直接就是开发一个大屏 首先必须要考虑的一个问题就是页面如何适应屏幕 因为我们在搭建或开发时一般都会基于一个固定的宽高 但是实际的屏幕可能大小不一 接下来我们就尝试

  • vue发展历史简介

    基本介绍 Vue 是一套用于构建用户界面的 渐进式框架 与其它大型框架不同的是 Vue 被设计为可以自底向上逐层应用 最初它不过是个人项目 时至今日 已成为全世界三大前端框架之一 github 上拥有 17 8万 Star 领先于 Reac

  • vue 子父组件间的那些事儿——搭建项目（一）

    一 搭建vue项目 1 环境准备 基于nodejs vue cli cnpm 搭建vue项目 由于本博主已经具备以上环境 现在直接进行项目搭建 环境准备可参考这篇博客 https blog csdn net xcymorningsun ar

  • 基于SpringCloud的分布式网上购物商城

    末尾获取源码 开发语言 Java Java开发工具 JDK1 8 后端 SpringCloud 前端 Vue HTML 数据库 MySQL5 7和Navicat管理工具结合 服务器 Tomcat8 5 开发软件 IDEA Eclipse 是

  • Vue出现弹出层时，禁止底部页面跟随滑动

    背景 最近在写一个vue项目 当出现弹出层时 发现底部页面跟随滚动 但是产品不想要这种效果 于是找各种资料 发现很多说法 但是试了试 发现有的根本就不行 比如说有人提出用vue中提供的 touchmove prevent方法来解决 但是我试

  • 前端的工程化、模块化和组件化

    什么是工程化 工程化是一种思想而不是某种特定的技术 当然我们在实现项目工程化的过程中 我们也会去使用一些技术 前端工程化是使用软件工程的技术和方法来对前端的开发流程 技术 工具等进行规范化 标准化 其主要目的为了提高效率和降低成本 即提高开

  • 滚动条样式

    一 在div中的滚动条样式 div webkit scrollbar width 5px 滚动条宽度 div webkit scrollbar thumb border radius 10px 滚动条圆角 webkit box shadow

  • 【vue3】elementplus日期组件英文转中文

    vue3 elementplus日期组件英文转中文 1 在main js或者main ts中加入 即可解决 import ElementPlus from element plus import element plus dist inde

  • 快速入手 vue3 defindeModel 双向绑定数据，赶快了解下

    彩蛋 在vue3 3x 版本中 官方 RFC 放出了 一个新特性 defineModel 它将让我们在自定义组件上双向绑定数据更加快捷 举个 以前我们父子组件双向数据绑定要在子组件里声明对应的props emts computed 子组件

  • 大数据毕业设计之前端03：logo、menu的折叠展开实现

    关键字 BuildAdmin pinia logo aside menu 菜单折叠 Vue ElementUI 前言 上一篇文章中 借助aside的实现讲了一些开发的小技巧 以及css的解读 本篇文章主要写一下如何填充aside的内容 as

  • Vue学习之watch侦听器:案例实现翻译功能

    watch侦听器 作用 监视数据的变化 当数据发生变化时 执行一些业务逻辑或者是异步操作 执行的场景例如在线翻译 当文本区域的内容发生变化时 会发生翻译内容的同时更新 语法 简单的写法 简单数据类型 可以直接的进行监听 完整的写法 添加额外

  • 基于vue2+海康威视web开发包3.2 无插件版本开发的监控系统

    文章目录 前言 一 插件准备 二 使用步骤 前言 项目最终效果为 可以预览 并且可以使用云台控制 购买的海康威视摄像头必须可以开启websocket 一 插件准备 插件下载地址 下载WEB无插件开发包V3 2 并加入到vue项目中 下载后解

  • Vue3+Echarts：堆积柱状图的绘制

    一 需求 在Vue3项目中 想用Echarts来绘制堆积柱状图 去展示最近一周APP在不同渠道的登录人数 效果如下 二 实现 关于Echarts的下载安装以及图表的样式设计 此处不展开 1 Templates部分

  • vue的组件

    在Vue中 组件是可复用的代码块 用于构建用户界面 Vue的组件系统允许您将界面拆分为独立的 可重复使用的部件 提供了更好的代码组织和复用性 以下是在Vue中创建组件的基本步骤 创建一个组件实例 可以使用Vue extend 方法创建一个V

  • Vue3 和Vue2的区别，以及钩子函数的使用

    Vue js 3 和 Vue js 2 是两个主要版本的流行前端框架 它们之间有很多区别 包括性能优化 新特性和改进的API等 以下是一些Vue 3与Vue 2之间的主要区别 以及一些示例代码来说明这些差异 1 性能优化 响应式系统 Vue

随机推荐

  • Linux pip install python 包，异常分析

    pip install python 包异常如下 xff1a WARNING Running pip as the 39 root 39 user can result in broken permissions and conflicti

  • kafka 简介

    简单介绍kafka 安装以及简单的单节点使用说明 xff0c 仅供了解 安装配置 启动验证 1 安装 下载kafka 安装包 xff0c 并解压 再次个人安装kafak 2 12 1 0 1 2 配置 配置 kafka 2 12 1 0 1

  • scp 远程复制命令介绍

    scp r 复制文件 scp P xff1a 复制指定端口号 目标 主机A 文件复制到主机B某指定目录下 实例 xff1a 将服务器 192 168 2 101 中文件夹 home bd 复制到 192 168 2 77 的目录 home

  • Django 项目迁移

    Django 项目APP Initapp 更新数据库 PS D Work Git Init Web Risk Init Init Sys gt PS D Work Git Init Web Risk Init Init Sys gt pyt

  • Xmind 转 Excel or CSV 格式的TestCase

    Xmind 脑图转 TestCase 随笔记录 1 新建Python 项目 Open Pycharm gt File gt New Project 2 下载安装包 xmind2testcase 和xmind2testlink File gt

  • 服务器蓝屏怎么回事，怎么解决？

    最近有小伙伴和我表示 xff0c 打开服务器是遇到蓝屏了 xff0c 有点慌 xff0c 咨询我有没有什么解决办法 xff0c 今天我在这边总结一下 一 服务器蓝屏原因 xff1a 1 版本冲突 2 软硬件不兼容 3 应用程序存在着BUG

  • zookeeper 集群搭建

    准备环境修改hostname 永久修改hostname root 64 bogon java hostnamectl set hostname server 247 root 64 bogon java root 64 bogon java

  • 为什么更多APP开发者选择穿山甲作为游戏变现平台？

    当前手游行业发展迅速 xff0c 游戏APP用户存量稳定 xff0c 变现价值大 而在选择游戏变现平台时 xff0c 更多开发者青睐于穿山甲平台 穿山甲平台有何优势 为什么会受到这么多APP开发者的信赖呢 穿山甲是国内领先的第三方变现平台

  • 穿山甲平台助力开发者降本增效，技术进阶

    在存量市场 xff0c 变现是开发者的头等大事 xff0c 开发者想要冲破重围 xff0c 必须要探索自我商业化道路与模式 广告变现是当下众多开发者的选择 xff0c 广告变现的路径有两条 xff1a 一 xff0c 保证广告位的填充率 二

  • Debian安装JDK-17.0.5教程

    第一步 xff1a 创建一个java文件夹 mkdir java 第二步 xff1a 打开java文件夹 cd java 第三步 xff1a 下载Linux版本的JDK xff08 jdk 17 linux x64 bin tar gz必须

  • STM32 控制LED灯 亮灭

    lcd c include 34 led h 34 void Delay uint32 t count unsigned int i for count 61 0 count i 61 500 while i void LED GPIO C

  • 树莓派import cv2 失败解决方法

    设备 树莓派4b 问题简述 xff1a 原装系统自带python3 9 2 xff0c 参考了大佬流 浪 猫的教程 超简单教你在树莓派上安装opencv xff08 二 xff09 时 xff0c 遇到了一个依赖源的安装错误 xff0c 直

  • Ansible学习笔记

    目录 1 Ansible搭建 xff08 基于CentOS 7 9 xff09 1 1 在控制节点和被控节点获取epel源 1 2 安装Ansible 2 理论 3 基础配置 3 1 Ansible发送指令的原理 3 2 Ansible配置

  • 半字符入栈的回文判定

    回文是指正读反读均相同的字符序列 xff1b 如 abba 和 abdba 均是回文 xff0c 但 good 不是回文 试写一个算法判定给定的字符序列是否是回文 xff08 提示 xff1a 将一半字符入栈 xff09 算法分析 xff1

  • vue中封装axios 以及api 统一管理

    目录 一 安装axios二 创建文件夹三 封装axios1 引入axios2 引入vuex3 引入vant4 引入我们的环境变量5 创建axios实例6 添加请求拦截7 响应拦截8 导出封装的axios函数 四 api统一管理1 引入我们封

  • 提示虚拟内存不足可能的原因以及该怎么处理

    一 什么是虚拟内存 虚拟内存的概念是相对于物理内存而言的 在硬盘上开辟一块磁盘空间当做内存使用 xff0c 这部分硬盘空间就叫虚拟内存 xff0c 是Windows系统将部分硬盘空间作为内存来使用 xff0c 解决物理内存被占用过多 xff

  • vue常用指令

    常用指令 xff1a vue常用指令有 xff1a v html指令 v show指令 v if指令 v else指令 v else if指令 v for指令 v text指令 v bind指令 v on指令 v model指令等等 1 v

  • wsl的安装及迁移至其他盘

    安装 xff1a wsl是什么 xff1a 适用于Linux的Windows子系统 编辑 维基百科 xff0c 自由的百科全书 xff08 重定向自Windows Subsystem for Linux xff09 跳到导航跳到搜索 适用于

  • ubuntu 不能检测到显卡信息

    开始时 xff1a lspci grep 39 VGA 39 lspci grep 39 VGA 39 01 00 0 VGA compatible controller NVIDIA Corporation Device 2560 rev

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

    记录项目 package json 文件中各插件的使用 xff1a 目录 1 axios 2 babel polyfill 3 core js 4 echarts 5 element ui 6 es6 promise 7 js beauti

热门标签