这篇文章主要介绍了Vue插件使用方法详情分享，使用插件之前显示定义，下文通过js插件定义展开详细文章介绍，具有一定的参考价值，需要的小伙伴可以参考一下
一.应用场景
为vue添加全局功能，比如添加全局方法和属性、混合全局组件、添加全局资源(指令、过滤器、过渡等。)，以及添加第三方类库(element-ui等)。)
二.使用方法
1.使用自定义插件
lt；1gt。创建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 = ()=gt;{alert('hello')}?? ?}}
lt；2gt。在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 =gt; h(App),}).$mount('#app')
2.使用第三方插件【elementUI】
lt；1gt。安装node.js和vue-cli脚手架 lt；2gt。输入命令NPM I element-ui-S lt；3gt。介绍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 =gt; h(App),}).$mount('#app')
当然，我们也可以下载HbuilderX，直接启动一个elementUI项目(王柴)
关于分享Vue插件使用细节的这篇文章到此为止。有关Vue插件使用的更多信息，请搜索SourceNet以前的文章或继续浏览下面的相关文章。希望大家以后多多支持SourceNet！