Vue插件使用方法详情分享

目录
  • 一.应用场景
  • 二.使用方法
    • 1.使用自定义插件
    • 2.使用第三方插件【elementUI】

一.应用场景

为vue添加全局功能，比如添加全局的方法和属性、混入全局组件、添加全局资源（指令、过滤器、过渡等）、添加第三方的类库（element-ui等）

二.使用方法

1.使用自定义插件

<1>.创建js文件

export default {
    install(Vue) {
        
        // 自定义全局过滤器（截取前四位A）
        Vue.filter('mySlice', function(){
            return value.slice(0, 4)
        })
        
        // 自定义全局指令（绑定时获取焦点）
        Vue.directive('fbind', {
            bind(element, binding) {element.value = binding.value}
            inserted(element, binding) {element.focus()}
            update(element, binding) {element.value = binding.value}
        })
        
        // 定义混入
        Vue.mixin({
            x: 123,
            y: 456
        })
        
        // 给Vue原型上添加一个方法
        Vue.prototype.hello = ()=>{alert('hello')}
    }
}

<2>.在 main.js 中引入自定义的js文件

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

// 引入js插件 ----------------------------
import myplugin from './plugins/myplugin'
Vue.use(myplugin)
// --------------------------------------

new Vue({
  render: h => h(App),
}).$mount('#app')

2.使用第三方插件【elementUI】

<1>.安装node.js和vue-cli脚手架
<2>.输入命令 npm i element-ui -S
<3>.在 main.js 中引入 elementUI 插件

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

// 引入 elementUI 插件 -------------------------
import Elementui from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(Elementui)
// --------------------------------------------

new Vue({
  render: h => h(App),
}).$mount('#app')

当然我们也可以可以下载 HbuilderX 直接启动一个 elementUI 项目（汪柴）

到此这篇关于Vue插件使用方法详情分享的文章就介绍到这了,更多相关Vue插件使用内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vue.js实现日历插件使用方法详解

    vue.js实现日历插件使用方法详解

    今天要实现的功能就是以下这个功能:vue.js模拟日历插件 好了废话不多说了 直接上代码了 css: *{ margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #app{ width: 1000px; margin: 10px auto; } .calender{ width: 1000px; } .calender table{

  • vue图片裁剪插件vue-cropper使用方法详解

    vue图片裁剪插件vue-cropper使用方法详解

    本文实例为大家分享了vue图片裁剪插件vue-cropper的使用方法,供大家参考,具体内容如下 我在网上找了很多关于vue裁剪图片的文章,demo都太长了,实在是太长了.有些还都看不懂,最后还是用了个大佬的demo,但是项目实践过程中还是有问题没解决.先介绍吧.效果是下面这样的, 我这里采用了4:3的固定比例进行裁剪,裁剪后的效果 但是裁剪后的图片路径是base64,超级长的路径,最终还是需要处理地址传给后端的,项目用oss处理图片,最终获得一个类似于aad68a8fd577464dbcdea

  • vue微信分享插件使用方法详解

    本文为大家分享了vue微信分享插件的使用方法,供大家参考,具体内容如下 1.安装weixin-js-sdk npm install weixin-js-sdk 2.创建文件并引入 在src下创建common目录 在common目录下创建wxshare.js 3.在wxshare.js中编写插件 import wx from 'weixin-js-sdk' import URL from '@/common/urlConfig' export const shareTitle = '测试'; ex

  • Vue中使用Lodop插件实现打印功能的简单方法

    介绍 需要进行打印功能,Lodop就是实现需求的插件.就是引入对应的js-sdk,使用js调用对应的打印方法,然后就会调出客户端软件(需要用户安装),然后就可以在软件里面打印内容了. 使用方法 最小实现 实现打印必须要执行的3个最基本的方法 LODOP.PRINT_INIT("打印任务名"); //首先一个初始化语句 LODOP.ADD_PRINT_TEXT(0,0,100,20,"文本内容一");//然后多个ADD语句及SET语句 LODOP.PRINT(); /

  • vue项目中使用vue-layer弹框插件的方法

    vue-layer弹框插件 安装 npm i --save vue-layer 引用 import layer from 'vue-layer' Vue.prototype.$layer = layer(Vue); 参数说明 { type: 0, //0(信息框,默认)1(页面层)2(iframe层)3(加载层)4(tips层) title: '信息', content: '', area: 'auto', offset: 'auto', icon: -1, btn: '确定', time: 0

  • vue中jsonp插件的使用方法示例

    通过jsonp简单获取接口数据,对了,注意下jsonp方法会自动添加callback <template> <div class="sky"> <h3>获取城市:</h3> <div class="skycon"></div> </div> </template> <script> //导入jsonp插件 import jsonp from 'jsonp';

  • vue视频播放插件vue-video-player的具体使用方法

    vue视频播放插件vue-video-player的具体使用方法

    安装 npm install vue-video-player --save 引入 可以全局引入插件,也可以在需要用到该插件的组件内单独引入(二选一) [1]全局引用, 在main.js里面导入并引用 import VideoPlayer from 'vue-video-player' import 'vue-video-player/src/custom-theme.css' import 'video.js/dist/video-js.css' Vue.use(VideoPlayer) [2

  • vue分页插件的使用方法

    本文实例为大家分享了vue分页插件的具体代码,供大家参考,具体内容如下 分页插件代码: <div> <div class="page"> <div class="pagelist"> <span class="jump" :class="{disabled:pstart}" @click="lessPage()">上一页</span> <sp

  • Vue插件使用方法详情分享

    Vue插件使用方法详情分享

    目录 一.应用场景 二.使用方法 1.使用自定义插件 2.使用第三方插件[elementUI] 一.应用场景 为vue添加全局功能,比如添加全局的方法和属性.混入全局组件.添加全局资源(指令.过滤器.过渡等).添加第三方的类库(element-ui等) 二.使用方法 1.使用自定义插件 <1>.创建js文件 export default {     install(Vue) {                  // 自定义全局过滤器(截取前四位A)         Vue.filter('m

  • vue 插件的方法代码详解

    在开发项目的时候,我们一般都用 vue-cli 来避免繁琐的 webpack 配置和 template 配置.但是官方 cli3 现在并不支持搭建 plugin 开发的项目. 还好,已经有大神(Kazupon)走在了我们前面,我们就用现成的vue-cli-plugin-p11n. 如果你没有安装 vue-cli,请先安装 npm i -g @vue/cli 首先,搭建项目 vue create [your plugin name] && cd [your plugin name] vue

  • 使用vue-cli编写vue插件的方法

    使用vue-cli编写vue插件的方法

    利用vue组件创建模板,使用webpack打包生成插件再全局使用 1.vue init webpack-simple 生成项目目录 2.调整目录结构 3.修改webpack.config.js var path = require('path') var webpack = require('webpack') module.exports = { entry: './src/index.js', output: { path: path.resolve(__dirname, './dist')

  • ThinkPHP上使用多说评论插件的方法

    ThinkPHP上使用多说评论插件的方法

    本文实例讲述了ThinkPHP上使用多说评论插件的方法.分享给大家供大家参考.具体实现方法如下: 先前访问网友的一些网站,他们好些的局部都发生了变化,如文章的评论模块设计得和谐美观,集表情和分享工具于一体,而且可以盖楼式评论,当时我真是称赞不已,真牛啊,能开发出这样的评论模块!后来聊天我才知道,原来他们是使用了多说评论插件. 什么是多说? 多说是一款追求极致体验的社会化评论框,可以用微博.QQ.人人.豆瓣等帐号登录并评论,用社交账号登录,进行评论,同时转发到社交平台(可选),进行回复.标记喜欢.

  • jQuery实现拖拽效果插件的方法

    本文实例讲述了jQuery实现拖拽效果插件的方法.分享给大家供大家参考.具体如下: 下面的jQuery插件允许你通过鼠标右键点击拖动overflow的元素,这个插件可以在移动设备上运行 /** * jQuery Drag and Scroll * * Copyright (c) 2012 Ryan Naddy (ryannaddy.com) * Dual licensed under the MIT and GPL licenses: * http://www.opensource.org/li

  • JS简单实现城市二级联动选择插件的方法

    JS简单实现城市二级联动选择插件的方法

    本文实例讲述了JS简单实现城市二级联动选择插件的方法.分享给大家供大家参考.具体如下: js实现的城市联动选择菜单,网上经常见到,不多介绍了,本款城市选择菜单原型基于Select,主要使用JavaScript来实现,运用了数组和循环等基础技巧制作完成的.本效果只是为了演示如何实现,里面的数据不全,需要的自己可以添加. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-ejld-city-cha-plug-codes/ 具体代码如下: <htm

  • 基于Python开发chrome插件的方法分析

    基于Python开发chrome插件的方法分析

    本文实例讲述了基于Python开发chrome插件的方法.分享给大家供大家参考,具体如下: 谷歌Chrome插件是使用HTML.JavaScript和CSS编写的.如果你之前从来没有写过Chrome插件,我建议你读一下这个.在这篇教程中,我们将教你如何使用Python代替JavaScript. 创建一个谷歌Chrome插件 首先,我们必须创建一个清单文件:manifest.json. { "manifest_version": 2, "name": "Py

  • CKeditor富文本编辑器使用技巧之添加自定义插件的方法

    本文实例讲述了CKeditor富文本编辑器使用技巧之添加自定义插件的方法.分享给大家供大家参考,具体如下: 首先就是在CKeditor的plugins目录下新建一个目录qchoice: qchoice目录下的结构如下: 然后, images中如下: dialogs中如下: 我们先来看plugins.js文件的内容: (function() { CKEDITOR.plugins.add("qchoice", { requires: ["dialog"], init:

  • IDEA安装vue插件图文详解

    IDEA安装vue插件图文详解

    非常详细的IDEA安装vue插件的方法,供大家参考,具体内容如下 1.idea上面安装vue插件 (到这里idea安装vue插件就好了,接下来我们开始搭建我们后台管理系统) 2.利用vue搭建后台管理系统,这边我们直接用半成品来搭建后台管理系统.这边我们首先克隆GitHub项目,项目地址 模板的项目目录: 3. 3.配置run启动: 4.npm install 初始化相关依赖(管理员打开cmd命令行) 5.idea中开启ES6 6.idea中开启ESlint检测 7.最后点击刚才配置的run,运

  • jQuery Raty星级评分插件使用方法实例分析

    本文实例讲述了jQuery Raty星级评分插件使用方法.分享给大家供大家参考,具体如下: 使用jQuery Raty,可以很方便的在页面上嵌入一个评分组件,如下所示: 使用方法很简单,首先从https://github.com/wbotelhos/raty下载raty的源代码(依赖于jquery) 然后在页面中引入相应的js文件.css文件.图片资源,在需要添加评分组件的元素上(比如span标签)添加下面的jquery代码即可: $('span').raty(); 以上为jQuery Raty

随机推荐