教你一步步封裝 Vue 元件並發布到 npm

2021-10-05 16:59:00 字數 1150 閱讀 8862

在開發專案過程中,通常會用到很多功能和設計相類似的元件,為了避免重複造輪子,我們經常會用到一些第三方元件,比如 vux,vant。但是這樣會引入太多沒用到的元件,造成打包體積過大。所以我們有必要封裝一些基礎的元件用於開發。

下面我為大家介紹如何封裝vue的toast和dialog元件並上傳到npm。

掘金:元件封裝必要性

this

.$toast()

this

.$toast()

this

.$dialog(}

)

>

>

name

="fade"

>

class

="little-tip"

v-show

="showtip"

>

src=

"assets/img/success.png"

alt="

" width

="36"

v-if

="type=='success'

" />

src=

"assets/img/fail.png"

alt="

" width

="36"

v-if

="type=='fail'

" />

src=

"assets/img/warning.png"

alt="

" width

="36"

v-if

="type=='warning'

" />

src=

"assets/img/loading.png"

alt="

" width

="36"

v-if

="type=='loading'

" class

="loading"

/>

>

}span

>

div>

transition

>

div>

template

>

教你一步步啟動程式

今天介紹一下專案的啟動流程,專案主要分為前端 和後台 兩個部分,下面以專案名稱為 product 舉例 我們存放前端 的資料夾為 product web 存放後台 的資料夾為 product server 啟動前提 1.已安裝nodejs和npm管理工具,並設定全域性變數 2.輸入命令行時必須確保在...

一步步教你上架iOS APP

注意,注意,注意 一定要設定enable xombie objects為不勾選。在edit scheme中有乙個run,然後選擇diagnostics,然後取消勾選enable zombie objects。如果沒有勾選就不用動了。這是是provisioning profiles 可以理解為配置概要...

一步步教你接入個推 推送

一 manifast中的配置 許可權 com.example.youzhen android name getui.permission.getuiservice.com.example.youzhen android protectionlevel normal 其他的一些 android val...