創(chuàng)建Vue組件npm包實(shí)戰(zhàn)分析

李廣宏

隨著前端技術(shù)的不斷發(fā)展，Vue已經(jīng)成為當(dāng)下比較流行的開發(fā)技術(shù)，作為前端工程師，積累下來的前端組件越來越多，通過npm發(fā)布組件包來復(fù)用這些組件，可以有效地提高工作效率。

創(chuàng)建項(xiàng)目并且開發(fā)組件

創(chuàng)建本地代碼庫(kù)

Vue腳手架現(xiàn)已經(jīng)有2個(gè)版本，在這里我們選擇Vue cli-3.0版本。創(chuàng)建好文件夾后，輸入命令$vue create resources，此處無需安裝UI框架，安裝一個(gè)基本腳手架即可。

組件代碼開發(fā)

進(jìn)入項(xiàng)目src文件夾，在該目錄下創(chuàng)建packages文件夾，里面用于存放插件包，例如，創(chuàng)建一個(gè)叫my-button組件。

首先在src＼packages＼my-button下創(chuàng)建button.vue和index.js button.vue文件內(nèi)容

index.js文件內(nèi)容

import MyButton from ./button.vue

MyButton.install = Vue => Vue.component（MyButton. name， MyButton）；

export default MyButton

本地組件調(diào)用測(cè)試

進(jìn)入項(xiàng)目src文件夾，在該目錄下創(chuàng)建page文件夾，里面用于存放本地瀏覽頁面，然后在創(chuàng)建一個(gè)button.vue文件，在到router.js文件將該頁面引入。

（a）引入組件

import MyButton from "../../packages/ my-button /button"；

在export default里添加組件components： { MyButton }。

（b）Template調(diào)用

按鈕

（c）運(yùn)行訪問效果

npm run dev啟動(dòng)本地代碼

瀏覽器里直接訪問http：//10.2.2.50：8080/#/button頁面。

如果你在瀏覽器里看到了一個(gè)button組件，并且是想要達(dá)到的效果，恭喜，你的組件基本創(chuàng)建完成。

npm發(fā)包前準(zhǔn)備工作

修改本地代碼庫(kù)里package.json文件，這里主要是在scripts對(duì)象里添加一條編譯命令：

"build-button"： "vue-cli-service build --target lib --name

MyButton ./src/packages/my-button/index.js"

執(zhí)行打包命令$npm run build-button出現(xiàn)Process finished with exit code 0說明已經(jīng)打包成功。

在生成的dist文件夾下創(chuàng)建package.json文件，package. json內(nèi)容如下：

{ "name"： "mybutton"，

"version"： "0.0.1"，

"main"： "MyButton.common.js"，

"private"： false，

"dependencies"： {}，

"author"： "test"，

"description"："這是一個(gè)按鈕組件"

}

發(fā)布npm組件包

注冊(cè)或登錄npm用戶

如果已經(jīng)有了賬號(hào)，輸入命令$npm login登錄即可，如果還沒賬號(hào)，可以登錄npm官方網(wǎng)站去注冊(cè)。登錄后輸入命令$npm whoami來驗(yàn)證當(dāng)前用戶名。

publish發(fā)布

進(jìn)入dist文件夾，$cd dist執(zhí)行$npm publish如果沒有報(bào)錯(cuò)，則表示發(fā)包成功，可以登錄npm官網(wǎng)，查看名下是否有一個(gè)叫mybutton組件包。

組件包引用

在其他項(xiàng)目工程下，執(zhí)行$npm install --save mybutton在main.js文件引入Import Mybutton from mybutton，如果組件有樣式文件，則需要再引入樣式。

import mybutton/mybutton.css

Vue.use（mybutton）

接下來在vue頁面中就可以直接使用了。

到此一個(gè)npm組件包就已經(jīng)成功的從發(fā)布到引用了。

npm官網(wǎng)服務(wù)可以為個(gè)人提供開發(fā)的方便，同時(shí)還可以允許別人來下載使用你的組件，也正因?yàn)榭赡軙?huì)有大量用戶正在使用你的npm包，所以你若想在npm unpublish并不會(huì)那么容易。