vue插件（vue插件有哪些）

本篇文章给大家谈谈vue插件，以及vue插件有哪些对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、vue的滚动条插件vue-scroll
• 2、怎么安装VUE的官方插件,vue-devtools。在控制台直接追踪查看vue的变化
• 3、【vue】插件
• 4、【Vue】插件:五、style-resources-loader 配置全局less变量
• 5、Vue 报表插件
• 6、20《Vue 入门教程》Vue 插件

vue的滚动条插件vue-scroll

最近在开发Vue项目时，需要实现宴缺世一个页面的局部滚动条功能。以前实现此类功能都是使用的iframe原生的滚动条功能，保证内容只在div块内滚动，别的地方不影响。

据尝试，发现Iview等组件库都没有符合这种情况的组件，于是查找了其他组件，最终选用晌肢了vue-scroll插件。

vuescroll 是一个基于 vue.js 2.X 虚拟滚动条， 它支持定制滚扮携动条的样式，检测内容尺寸变化、能够使内容分页、支持上拉-刷新，下推加载等诸多特性。

(1)拥有原生滚动条的滚动行为

(2)可以定制滚动条的样式(包括颜色、尺寸、位置、透明度、是否保持显示等)

(3)在模式之间自由切换

(4)能够通过设置滚动动画来平滑地滚动

(5)拉取刷新和推动加载

(6)支持分页模式(每次滑动整个页面)

(7)支持快照模式(每次滑动滚动一个用户定义的距离)

(8)可以检测内容尺寸发生变化

在components中再注册一下

这两种引入方式都可以，引入后用vuescroll包裹需要滚动的部分

在data中写明需要修改的配置项

[img]

怎么安装VUE的官方插件,vue-devtools。在控制台直接追踪查看vue的变化

安装VUE的方法有两种：

第一种方法：需正常打开亩唤chrome商店，搜索vuejs devtools 安装。chrome://extensions/ 开发者工具-扩展迅拿凯程序下启用；

第二种方法：github下载插件，npm包安装依赖，拖入浏览器扩展程序。具体操作如下：

1、下载chrome扩展插件。在github上下载压缩包并解压敏纳到本地。

2、npm install下载完成后打开命令行cmd进入vue-devtools-master文件夹。

3、 打开shellschromemanifest.json并把json文件里的persistent：false改成true。

4、扩展chrome插件。打开chrome浏览器，打开更多工具扩展程序；再点击加载已解压的扩展程序，然后把shellschrome文件夹放入。

5、测试安装成功。在插件的目录下执行npm run dev，这个时候的插件就可以运行了。

【vue】插件

插件通常用来为 Vue 添加 全局功能 ，所谓全局即不需要像组件那样，每次使用他前都需要先引入一次。对于插件只要在 最开始引入一次，在任何组件就可以直接使用 。（类似于我链如们在window上添加的方法属性那样，任何地方都可以用）

下面几种常见的用途：

主要两种使用方式

一：全局引入方式

（1）使用步骤

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

也可以传入一个可选的选项对象：

（2）在main.js中配置

比如：使用element-ui为例：

组使用件中

二：组件引入方式棚纯启

比如，以使用 swiper为例

组件中使用

vue插件其实就是一个简单的 js对象而已 ，然后这个插件对象有一个公开属性 install ，他的值为一个函数，此函数接受两个参数。第一个参数是 Vue 构造器 , 第二个参数是一个可选的选项对象。

一：开发插件有四种方法

二：添加实例方法

其中最常用的：【4. 添加实例方法】的写法和使用方法，下面举例说明toast 最简单插件开发过：

（1）新建一个plugin目录，编辑插件toast.js文件

（2）在 main.js 中，需要导入 toast.js 并且通过全局方法 Vue.use() 来使用插件

（3）我们在组件中来获取该插件定义的 $msg 属性，比如在裤敏根组件App.vue中

控制台输出：Hello World

三：添加全局资源

这里主要介绍过滤器

（1）在plugin目录新建插件filter.js文件

（2）在 main.js 中，需要导入 filter.js 并且通过全局方法 Vue.use() 来使用插件

（3）HelloWorld.vue页面上使用

添加全局资源也可以不放在插件里面实现，可以直接在main.js入口文件创建Vue实例前添加：

其他组件就可以通过this直接使用:

（1）核心区别

简单来说，插件就是指对Vue的功能的增强或补充。

（2）其他区别

一个Vue插件可以是一堆Vue组件的集合（插件干的事就是把内部的组件帮你倒入到vue全局下），也可以是用来扩展Vue功能的，比如 Vuex， Vue-Router。

测试完成，下面就要把的内容打包发布到npm 上去,具体步骤可以参照

【Vue】插件:五、style-resources-loader 配置全局less变量

1. 插件安装

前提：附属插件安装

确保已安装less、less-loader

less官方安装及使用文档：

npm i less

less-loader官方安装及使用文档：

npm i less-loader

或

npm install less-loader --save-dev

或

npm install -D less-loaderless

1.1. 方法1：分开安装

安装style-resources-loader

官方安装及使用文档：

npm i style-resources-loader --save-dev

安装vue-cli-plugin-style-resources-loader

官方安装及使用文档：

npm i vue-cli-plugin-style-resources-loader --save-dev

1.2. 方法二：直接使用vue add style-resources-loader安装

vue add style-resources-loader

vue add pluginName 是vue-cli3提供的。vue add 是用yarn安装插件的， yarn源的问题有可能导致失败。如果安装失败的话，就采用 方法一

选择预处理器

安装完成后会让你自行选择预处理器，本文选择 less预处理器

选择预处理器

2. 在vue.config.js中使用

const path = require('path');

module.exports= {

   旅陆哗             pluginOptions: {

                            'style-resources-loader': {

                            preProcessor:'less',

                            patterns: [

                            // 这个是加上自己的路径,不能使用(如下:alias)中配置的别名路径

                            path.resolve(__dirname, './src/style/globel.less')

                        ]

                    }

                },

                        ……

             拆行悉枣       其他配置

                        ……

    }

注意：如果在安装时项目中已经有了 vue.config.js 文件，需要在安装第三方包之前先删除，再重新创建

3. 重启项目

npm run serve

Vue 报表插件

环境 Vue2.x

之前使用的报表开发插件       vue-easy-print @0.0.8     

能打印pdf报表,但是存在 不能打印多页仿纤 的问题,使用人数较少,文档较少,版本较庆大斗低,放弃.

改用新的插件      print-js

能在原来的基础上解决打印多页pdf的问题

npm install print-js --save

    import printJS from 'print-js'

visa-template  id="aaa" /visa-template

el-button type="primary" onclick="printJS( {printable:'aaa', type:'html',scanStyles:false,css:[''],style:''})"

  生成报表

/el-button

例如:

    style:'{div:{color:#008855}}'

    字体缩小  .reportTable{font-size:0.8em !important }

#能分页靠的是这个css

```

.reportBox {

  text-align: center;

  width: 100%;

  margin: auto;

  page-break-after: always;

  margin-top: 20px;

  font-family: "微软雅黑"誉磨;

}

```

20《Vue 入门教程》Vue 插件

本节我们将介绍 Vue 的插件。包括什么是插件、如何使用插件、如何编写一个简单的插件。其中，编写和使用插件是本节的重点。本节我们将带领大家写一个简单的插件示例，同学们在学完本节后可以尝试编写其他的插件来加深学习。

Vue 插件是对 Vue 全局功能的扩展，他可以给 Vue 添加全局方法、属性、组件、过滤器、指令等等。

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

也可以传入一个可选的选项对象：

Vue.use 会自动阻止多次注册相同插件，即使多次调用也只会注册一次该插件。 Vue.js 官方提供的一些插件 (例如 vue-router) 在检测到 Vue 是可访问的全局变量时会自动调用 Vue.use ()。然而在像 CommonJS 这样的模块环境中，你应该始终显式地调用 Vue.use ()：

awesome-vue 集合简肆了大量由社区贡献的插件和库。

Vue.js 的插饥薯件应该暴露一个 install 方法。这个方法的第一个参数是 Vue 构造器，第二个参数是一个可选的选项对象：

接下来，我们写一个具体的插件示例：

实例演示

"运行案例" 可查看在线运行效果

代码解释： JS 代码第 3-20 行，我们拦肢轿定义了插件 MyPlugin，该插件中包含一个全局组件 MyButton。 JS 代码第 22 行，通过 Vue.use 使用 MyPlugin。 HTML 代码第 2、4、6、8、10 行，使用 MyPlugin 插件中的 MyButton 组件。

本节，我们带大家学习了 Vue 插件的使用方式。主要知识点有以下几点：

关于vue插件和vue插件有哪些的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。