vue中如何引入插件并使用

news2024/10/6 22:19:14

Vue中的插件类型

vue中有大致有三种类型的插件,第三方插件、基于vue开发的插件及基于vue开发的组件

第三方插件

如:jquery、moment.js、aixos、Highcharts等

注意:Highcharts也有基于vue开发的插件版本,具体使用方法参见下文

自定义文件-ES6的模块引用和使用语法

ES6模块的引入与使用

vue的main.js中引入第三方js文件

引用规则

import from 'xxx’是如何找到node_modules目录下的文件的

基于Node模块系统的约定和实现(Webpack打包工具兼容node模块系统,遵守相关规则),当require/import 的模块不是核心模块,或“./”这样的相对路径时,会从当前文件夹的node_modules目录开始找,找不到就到当前文件夹的上一层node_modules里找,直到找到全局的node_modules。

最终找到的是一个同名的文件夹,如果文件夹下有package.json,便根据main字段找到入口js文件,执行相关代码。

(其中,后缀可以省略,默认优先级 js > vue)

参考这个链接

以Vue中引入jquery为例

import jq from "jquery"

上传引入方式等同于

import jq from "./node_modules/jquery/dist/jquery.js"

有些引用是可以简写的,如

import './style/reset.css';
import './style/element-variables.scss';
import './style/font_icons/iconfont.css';
import './style/style.scss';

js插件的使用

以jquery为例

全局引入(main.js中):

//引入
import jq from "jquery"
//全局挂载
Vue.prototype.$ = jq;

单组件引入(每个组件中必须引入才可以使用):

//引入
import $ from "jquery"

单组件的引入方式显然是比较麻烦的,可以通过webpack进行配置解决此问题!

如(详细信息参考:webpack配置jq)

new webpack.ProvidePlugin({
            $:"jquery",
            "window.jQuery": "jquery",
            jQuery: "jquery",
            jquery: "jquery",
}),

基于vue开发的插件

此类插件需要使用vue.use()调用,如ElementUI 、Highcharts

插件的使用规则

1.通过全局方法 Vue.use() 使用插件。它需要在你调用 new Vue() 启动应用之前完成:

(注:在使用Vue.use()时,自动调用里面的方法)

// 调用 `MyPlugin.install(Vue)`
Vue.use(MyPlugin)

new Vue({
  // ...组件选项
})

也可以传入一个自定义的的配置对象:Vue.use(MyPlugin, { name: “gcshi” })

2.Vue.js 的插件应该暴露一个 install 方法。这个方法的第一个参数是 Vue 构造器,第二个参数是一个可选的选项对象(这个对象参数就是Vue.use(MyPlugin)的MyPlugin)

//如果插件是一个函数,它会被作为 install 方法。install 方法调用时,会将 Vue 作为参数传入。

MyPlugin.install = function (Vue, options) {

}

插件使用的场景

MyPlugin.install = function (Vue, options) {
  // 1. 添加全局方法或 property
  Vue.myGlobalMethod = function () {
    // 逻辑...
  }

  // 2. 添加全局资源()自定义指令
  Vue.directive('my-directive', {
    bind (el, binding, vnode, oldVnode) {
      // 逻辑...
    }
    ...
  })

  // 3. 注入组件选项
  Vue.mixin({
    created: function () {
      // 逻辑...
    }
    ...
  })

  // 4. 添加实例方法
  Vue.prototype.$myMethod = function (methodOptions) {
    // 逻辑...
  }
}

插件使用示例-自定义指令

https://www.yuque.com/shiguangchao/cbygfe/yfvf8d

基于vue开发的组件

如:

import JsonExcel from 'vue-json-excel'
Vue.component('downloadExcel', JsonExcel)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/719204.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

C++中的类

1、类和对象 C中通过class定义类 class A {int a; }; // 定义一个A类型的类通过类来定义对象 A a; // 定义一个A类型的对象类是一张蓝图,是抽象的。而对象是根据蓝图真正建造出来的建筑,是具象的。 对象是类的实体化 2、类的限制修饰符 类有三种修…

xmrig病毒删除

删除病毒 [rootnode101 .mint-xmr]# top | headPID USER PR NI VIRT RES SHR S %CPU %MEM TIME COMMAND 15870 root 20 0 4597844 2.0g 4 S 1017 3.3 52:05.95 xmrig[rootnode101 .mint-xmr]# ll /proc/15870/exe lrwxrwxrwx. 1 root ro…

【C#】SqlBulkCopy批量添加注意DataTable必须与表列顺序一致,否则报错,以及关闭自增列

前篇文章在测试一个批量添加的操作,发现一致添加不成功,最后分析是字段列顺序不一致的问题 目录 1、列名不一致1.1、错误信息1.2、解决方法 2、关闭自增列2.1、不包含列2.2、特性关闭 1、列名不一致 1.1、错误信息 在调试时,一致提示如下错…

基于 Flink SQL CDC的实时数据同步方案

基于 Flink SQL CDC的实时数据同步方案http://www.dreamwu.com/post-1594.html

iframe编码为utf-8.嵌入页面为gb2312 ,word导出默认为gb2312 格式

使用记事本打开html,另存为,保存类型选择:"所有文件"、编码选择:“UTF-8”打开保存后文件编码类型改成utf-8 第一个步骤是为了把内容改成utf-8,然后直接执行第二步改编码可能会报乱码

解决printJS打印问题汇总

目录 一、打印预览表格列不全(Element的el-table组件) 1、打印设置“打印缩放” 2、修改el——table的底层代码(如果页面上有多个表格慎用) 一、打印预览表格列不全(Element的el-table组件) 问题描述&a…

简单的手机记事本app怎么查看提醒列表?

很多人平时都有随手记事的习惯,在记录事情的时候使用手机上的记事本app是一个不错的选择。有的记事本功能比较完善,不但能记事还能设置提醒,当有多条提醒内容存在时,简单的手机记事本app怎么查看提醒列表呢?以iPhone手…

Easyexcel 导出数据 一对多关系导出数据集合

客户要求 要求导出的表格如图 实现这样表格 很多人会想到动态表头,easypoi可以直接实现,但是我用的是easyexcel,而easyexcel自身并没有提供自动合并的功能所以还是需要自己来合并。 代码如下 首先我们来看下将嵌套数据平铺,不进行合并导出…

解决github打不开的方法(亲测有效)

网上提供了很多针对github打开慢的解决方案,什么又是改host文件,又是下载杂七杂八的加速器等等,其实效果并不好,微软商城已有对应的软件可以解决该问题,获取路径更为安全。 目录 安装Watt Toolkit找不到Microsoft Stor…

Aduc7126的PLA模块

PLA 一、PLA结构讲解 PLA是Aduc7126内部的可编辑逻辑阵列,Aduc7126总共有16个element,分为两组,如下图所示。 下图是PLA的其中一个element结构图,按照由左至右进行讲解: 左边MUX0、MUX1、MUX2、MUX3都是选择器&#…

将 InputStream 流转成 MultipartFile

MultipartFile是一个接口, 有一个MockMultipartFile实现类,里面有构造方法可以直接将输入流转为MutipartFile对象: MultipartFile File new MockMultipartFile(filename, file.getName(), file.getContentType(), fileStream); 使用MockMultipartFile类, 项目需要导入org.sp…

maven配置问题

maven配置问题 Error running ‘项目名 [install]’: No valid Maven installation No valid Maven installation found. Either set the home directory in the configuration dialog or set the M2_HOME environment variable on your system. 解决方法: 依次检…

Echarts柱状图循环配色多色彩

话不多说,直接上配置案例,欢迎留言分享交流 option {xAxis: {type: category,data: [Mon, Tue, Wed, Thu, Fri, Sat, Sun,"y","q","y","u"]},yAxis: {type: value},series: [{itemStyle: {normal: {// barBorde…

华为OD机试真题 Python 实现【数组的中心位置】【2023Q1 100分】,附详细解题思路

目录 一、题目描述二、输入描述三、输出描述四、解题思路五、Python算法源码六、效果展示1、输入2、输出 一、题目描述 给你一个整数数组nums,请计算数组的中心位置,数组的中心位置是数组的一个下标,其左侧所有元素相乘的积等于右侧所有元素…

Fiddler 工具的使用

文章目录 01 Fiddler 工具介绍1. 下载与安装2. Fiddler 工具界面介绍3. Fiddler 工具的工作原理 02 手工调用 HTTP 接口1. 发送HTTP请求2. 查看返回数据包 03 获取 PC 端的网络数据包04 获取手机端的网络数据包05 截包与改包场景一:截断请求数据,然后篡改…

一键安装和卸载docker及docker-compose

代码: #!/bin/bashSYSTEMD_PATH/usr/lib/systemd/system/docker.service DOCKER_FILEdocker-20.10.23.tgz DOCKER_COMPOSE_FILEdocker-compose-plugin-2.15.1-3.el8.x86_64.rpm RED\E[1;31m GREEN\E[1;32m YELOW\E[1;33m SHAN\E[1;31;5m RES\E[0mfunction install_…

项目中期检查会议和进度对接

1.召开中期项目检查会议,与团队成员和博士王锟对接进度。对整体项目表示满意接受,指出重点需要修改提升和进一步开发完善的部分,以增强系统的完整度、功能亮点和界面数量点。具体为 ①注重“highlight”,即布局凸显主题功能&…

spring cloud 之 ribbon

Ribbon概念 Spring Cloud Ribbon 是基于 Netflix Ribbon 实现的一套客户端负载均衡的工具,主要功能是提供客户端负载均衡算法和服务调用。简单的说,就是在配置文件中列出 Load Balance( LB:将用户的请求平摊的分配到多个服务上&a…

JavaScript ES5中实现继承

1 对象和函数的原型 2 new、constructor 3 原型链的查找顺序 4 原型链实现的继承 5 借用构造函数继承 6 寄生组合实现继承 function 创建的名称如果开头是大写的,那这个创建的不是函数,是创建了类。 要注意区分!本章很多这样子的类。 实…

热烈祝贺! 爱创科技加入中经联溯源技术专业委员会!

6月27日,中国商业股份制企业经济联合会溯源技术专业委员会为北京爱创科技股份有限公司举行入会授牌仪式。授牌仪式由溯源技术专业委员会副秘书长卢要宁同志主持,溯源技术专业委员会主任宁晓鹏及北京爱创科技股份有限公司企业发展规划部总监杜薇出席。 在…