Vue插件使用方法詳情分享
更新時(shí)間：2022年03月29日 11:24:54 作者：什么都干的派森
這篇文章主要介紹了Vue插件使用方法詳情分享，使用插件之前顯示定義，下文通過(guò)js插件定義展開詳細(xì)文章介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下
一.應(yīng)用場(chǎng)景
為vue添加全局功能，比如添加全局的方法和屬性、混入全局組件、添加全局資源（指令、過(guò)濾器、過(guò)渡等）、添加第三方的類庫(kù)（element-ui等）
二.使用方法
1.使用自定義插件
<1>.創(chuàng)建js文件
export default {
?? ?install(Vue) {
?? ??? ?
?? ??? ?// 自定義全局過(guò)濾器（截取前四位A）
?? ??? ?Vue.filter('mySlice', function(){
?? ??? ??? ?return value.slice(0, 4)
?? ??? ?})
?? ??? ?
?? ??? ?// 自定義全局指令（綁定時(shí)獲取焦點(diǎn)）
?? ??? ?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原型上添加一個(gè)方法
?? ??? ?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')當(dāng)然我們也可以可以下載 HbuilderX 直接啟動(dòng)一個(gè) elementUI 項(xiàng)目（汪柴）
到此這篇關(guān)于Vue插件使用方法詳情分享的文章就介紹到這了,更多相關(guān)Vue插件使用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue2和Vue3的nextTick實(shí)現(xiàn)原理
Vue 中的數(shù)據(jù)綁定和模板渲染都是異步的，那么如何在更新完成后執(zhí)行回調(diào)函數(shù)呢？這就需要用到 Vue 的 nextTick 方法了，本文詳細(xì)介紹了Vue2和Vue3的nextTick實(shí)現(xiàn)原理，感興趣的同學(xué)可以參考一下2023-04-04
關(guān)于vue 項(xiàng)目中瀏覽器跨域的配置問(wèn)題
這篇文章主要介紹了vue 項(xiàng)目中瀏覽器跨域的配置問(wèn)題,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-11-11
這篇文章主要介紹了vue?遮罩和ref的使用，setup版和非setup版,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-03-03
關(guān)于VUE的編譯作用域及slot作用域插槽問(wèn)題
這篇文章主要介紹了VUE 的編譯作用域及slot作用域插槽問(wèn)題，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-07-07
vue 項(xiàng)目引入echarts 添加點(diǎn)擊事件操作
這篇文章主要介紹了vue 項(xiàng)目引入echarts 添加點(diǎn)擊事件操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-09-09
Pinia?是?Vue.js?的輕量級(jí)狀態(tài)管理庫(kù),最近很受歡迎,它使用?Vue?3?中的新反應(yīng)系統(tǒng)來(lái)構(gòu)建一個(gè)直觀且完全類型化的狀態(tài)管理庫(kù),下面就跟隨小編一起來(lái)學(xué)習(xí)一下它的具體使用吧2023-10-10
vue中的vue-print-nb如何實(shí)現(xiàn)頁(yè)面打印
這篇文章主要介紹了vue中的vue-print-nb如何實(shí)現(xiàn)頁(yè)面打印，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vue不用window的方式如何刷新當(dāng)前頁(yè)面
這篇文章主要介紹了vue不用window的方式如何刷新當(dāng)前頁(yè)面,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11
vue基于v-charts封裝雙向條形圖的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue基于v-charts封裝雙向條形圖的實(shí)現(xiàn)代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
這篇文章主要介紹了vue2響應(yīng)式的缺點(diǎn)影響，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-05-05