Vue插件使用方法詳情分享
更新時間：2022年03月29日 11:24:54 作者：什么都干的派森
這篇文章主要介紹了Vue插件使用方法詳情分享，使用插件之前顯示定義，下文通過js插件定義展開詳細文章介紹，具有一定的參考價值，需要的小伙伴可以參考一下
一.應用場景
為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 項目（汪柴）
到此這篇關于Vue插件使用方法詳情分享的文章就介紹到這了,更多相關Vue插件使用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
vue中如何使用唯一標識uuid(uuid.v1()-時間戳、uuid.v4()-隨機數(shù))
這篇文章主要給大家介紹了關于vue中如何使用唯一標識uuid(uuid.v1()-時間戳、uuid.v4()-隨機數(shù))的相關資料,當使用Vue.js生成UUID時,我們可以使用uuid庫來幫助我們生成通用唯一標識符(UUID),需要的朋友可以參考下2023-12-12
Vue使用Element折疊面板Collapse如何設置默認全部展開
這篇文章主要介紹了Vue使用Element折疊面板Collapse如何設置默認全部展開，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
vue?使用mescroll.js框架實現(xiàn)下拉加載和上拉刷新功能
這篇文章主要介紹了vue?使用mescroll.js框架?實現(xiàn)下拉加載和上拉刷新功能,本文通過示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-07-07
懶加載的好處在于減少服務器的壓力,在網(wǎng)絡比較慢的情況下,可以提前給這張圖片添加一個占位圖片,提高用戶的體驗,這篇文章主要給大家介紹了關于vue項目實現(xiàn)圖片懶加載的相關資料,需要的朋友可以參考下2022-09-09
前幾天朋友在做vue項目開發(fā)時，有人反映?IOS?上面的滑動點擊有點問題，讓我們來幫忙解決，于是我就重寫了代碼，下面把vue仿qq左滑刪除組件功能分享到腳本之家平臺，需要的朋友參考下吧2018-03-03
解決vue項目中某一頁面不想引用公共組件app.vue的問題
這篇文章主要介紹了解決vue項目中某一頁面不想引用公共組件app.vue的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
elementUI?checkBox報錯Cannot read property &ap
這篇文章主要為大家介紹了elementUI?checkBox報錯Cannot read property 'length' of undefined的解決分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-06-06
Vue如何使用Element-ui表單發(fā)送數(shù)據(jù)與多張圖片到后端詳解
在做項目的時候遇到一個問題,前端需要上傳表單到后端,表單數(shù)據(jù)包括文本內(nèi)容和圖片,這篇文章主要給大家介紹了關于Vue如何使用Element-ui表單發(fā)送數(shù)據(jù)與多張圖片到后端的相關資料,需要的朋友可以參考下2022-04-04
這篇文章主要介紹了基于vue-ssr服務端渲染入門詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
Vue中控制v-for循環(huán)次數(shù)的實現(xiàn)方法
今天小編就為大家分享一篇Vue中控制v-for循環(huán)次數(shù)的實現(xiàn)方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09