vue.use有什么用

這篇文章給大家分享的是有關(guān)vue.use有什么用的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考。一起跟隨小編過來看看吧。

成都創(chuàng)新互聯(lián)長期為成百上千家客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊從業(yè)經(jīng)驗10年，關(guān)注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為連平企業(yè)提供專業(yè)的成都做網(wǎng)站、網(wǎng)站設(shè)計、外貿(mào)營銷網(wǎng)站建設(shè)，連平網(wǎng)站改版等技術(shù)服務(wù)。擁有十載豐富建站經(jīng)驗和眾多成功案例,為您定制開發(fā)。

vue.use是一個官方API，是全局注冊一個組件或者插件的方法，如果插件（plugin）是一個對象，必須提供install方法；如果插件是一個函數(shù)，它會作為install方法。該方法需要在調(diào)用“New Vue()”之前被調(diào)用。

官方API介紹：

Vue.use(plugin)

參數(shù)

{Object | function} plugin

用法

安裝Vue.js 插件。如果插件(plugin)是一個對象，必須提供install方法。如果插件是一個函數(shù)，它會作為install方法。install方法調(diào)用時，會將Vue作為參數(shù)傳入。

該方法需要在調(diào)用New Vue()之前被調(diào)用。

當(dāng)install方法被同一個插件多次調(diào)用，插件將只會被安裝一次。

Vue.use的使用

Element-UI例子

根據(jù)ElementUI文檔，在Vue cli搭建的項目中這樣使用ElementUI

/*
mian.js
*/
import Vue from 'vue';
import ElementUI from 'element-ui'; // 1
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUI); // 2

new Vue({
el: '#app',
render: h => h(App)
});

以上代碼便完成了Element的引入，需要注意的是，樣式文件需要單獨引入。
后面就可以在Vue的單文件組件中直接使用<el-xxx></el-xxx>來使用Element元素。
所以這到底發(fā)生了什么？

1、第一處注釋導(dǎo)入ElementUI

import ElementUI from 'element-ui'

// TODO 理解如何導(dǎo)入模塊

以下是src/index.js的內(nèi)容?？梢钥吹?，index.js導(dǎo)出了一個對象，在上面的import語句中，這個對象被賦予ElementUI的變量名。請注意到這里的install函數(shù)。

/*
index.js
*/
export default {
  version: '2.11.1',
  locale: locale.use,
  i18n: locale.i18n,
  install,
  ...
};

2、第二處注釋安裝ElementUI

Vue.use(ElementUI);

我們觀察到這里使用了Vue.use方法并將ElementUI這個對象傳入。從Vue.use文檔中可以得知，這會調(diào)用ElementUI對象的install方法，并將Vue傳入。

// install函數(shù)
const install = function(Vue, opts = {}) {
 locale.use(opts.locale);
 locale.i18n(opts.i18n);

// 安裝組件：通過Vue.component聲明全局組件，所以我們能夠直接使用而不需要聲明
 components.forEach(component => {
   Vue.component(component.name, component);
 });

 Vue.use(InfiniteScroll);
 Vue.use(Loading.directive);

// 在Vue的原型鏈上做一些小動作所以所有的Vue實例都可以訪問到這些生命的變量
// 變量名使用$開頭表明這是公共API屬性或者方法，這是一種約定。
 Vue.prototype.$ELEMENT = {
   size: opts.size || '',
   zIndex: opts.zIndex || 2000
 };

// ok，這里我們看到了許多用于提示的組件都設(shè)定在Vue原型鏈上，所以我們可以在Vue實例內(nèi)部直接使用this.$alert
 Vue.prototype.$loading = Loading.service;
 Vue.prototype.$msgbox = MessageBox;
 Vue.prototype.$alert = MessageBox.alert;
 Vue.prototype.$confirm = MessageBox.confirm;
 Vue.prototype.$prompt = MessageBox.prompt;
 Vue.prototype.$notify = Notification;
 Vue.prototype.$message = Message;

};

感謝各位的閱讀！關(guān)于vue.use有什么用就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

網(wǎng)站題目：vue.use有什么用
分享路徑：http://muchs.cn/article38/ijodsp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供靜態(tài)網(wǎng)站、App設(shè)計、移動網(wǎng)站建設(shè)、做網(wǎng)站、企業(yè)建站、服務(wù)器托管

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容