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