自己編寫並發布乙個Vue元件

2022-06-22 02:12:08 字數 1460 閱讀 5647

自己編寫並發布乙個vue元件

1. 幾種開源協議的介紹

2.開始編寫元件

新建plugin資料夾:

指定 元件、入口檔案和package.json檔案,

看一下各個檔案內容:

1.package.json 是npm init生成的:

2.loading.vue 是編寫的元件檔案:

在loading.js中, 使用了

3.loading.js 是指定的入口檔案:

import loadingcomponent from './loading.vue'

// 新建乙個loading.js檔案,引入我們的loading.vue檔案

console.log(`******************************====`)

console.log(`******************************====`)

let $vm

export default )

// 通過new loadingplugin新建乙個vm例項 掛載到div元素上

}// 建立了$vm例項後,我們可以訪問該例項的屬性和方法比如通過$vm.show就可以改變

// loading元件的show值來控制其顯示隱藏

$vm.show = false

let loading = ,

hide ()

}if (!vue.$loading)

// 最後我們通過vue.mixin或者vue.prototpye.$loading 來全域性新增$loading事件

// 其又包含了show和hide兩個方法,我們可以在頁面中使用this.$loading.show()

// 來顯示載入 使用this.$loading.hide()來關閉載入

vue.mixin(})}

}如何發布到npm上:

1.npm login 

2.npm publish (根據官網文件在72小時內可以npm unpublish)

使用:新建乙個專案

npm install test__my__plugin

然後在main.js中 import a from 'test__my__plugin'

vue.use(a)

然後this.$loading.show('my text')

Vue 乙個元件引用另乙個元件

有些時候需要這麼做,比如,我想在首頁載入輪播元件,但是又不想全域性註冊 因為不是每個頁面都需要輪播功能 方法1 1 template 2 div 34 testcomponent testcomponent 5div 6template 78 script 9 1.先使用import匯入你要在該元件...

如何建立乙個前端 React 元件並發布到 NPM

首先npm文件擺在這裡 參考元件 造輪子 是非常有效的學習方法。在熟練掌握api的搬運方法之後,我們可以通過自己 造輪子 來進一步掌握和理解更底層的知識。自己完成乙個元件的開發之後,我們可以打包上傳到 npm 來分享自己的成果。在後面的步驟中,將會實現以下幾個小目標 配置開發環境 開發元件 打包元件...

Vue 封裝乙個自己寫的元件或方法

1.首先寫好裡面的模板及傳遞過來的引數 2.定義乙個index.js並引入剛建立的元件並export defaut vue 3.在main.js裡面引入 然後vue.use 引入的名稱 vue封裝乙個js引用 vue封裝的js裡面可以是個物件 也可以是方法 export 和 export defau...