Vue插件使用方法詳情分享

更新時間：2022年03月29日 11:24:54 作者：什么都干的派森

這篇文章主要介紹了Vue插件使用方法詳情分享，使用插件之前顯示定義，下文通過js插件定義展開詳細文章介紹，具有一定的參考價值，需要的小伙伴可以參考一下

一.應(yīng)用場景

為vue添加全局功能，比如添加全局的方法和屬性、混入全局組件、添加全局資源（指令、過濾器、過渡等）、添加第三方的類庫（element-ui等）

二.使用方法

1.使用自定義插件

<1>.創(chuàng)建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 項目（汪柴）