自己編寫並發布乙個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...