創建Vue組件npm包實戰分析

李廣宏

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

創建項目并且開發組件

創建本地代碼庫

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

組件代碼開發

進入項目src文件夾，在該目錄下創建packages文件夾，里面用于存放插件包，例如，創建一個叫my-button組件。

首先在src＼packages＼my-button下創建button.vue和index.js button.vue文件內容

index.js文件內容

import MyButton from ./button.vue

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

export default MyButton

本地組件調用測試

進入項目src文件夾，在該目錄下創建page文件夾，里面用于存放本地瀏覽頁面，然后在創建一個button.vue文件，在到router.js文件將該頁面引入。

（a）引入組件

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

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

（b）Template調用

按鈕

（c）運行訪問效果

npm run dev啟動本地代碼

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

如果你在瀏覽器里看到了一個button組件，并且是想要達到的效果，恭喜，你的組件基本創建完成。

npm發包前準備工作

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

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

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

執行打包命令$npm run build-button出現Process finished with exit code 0說明已經打包成功。

在生成的dist文件夾下創建package.json文件，package. json內容如下：

{ "name"： "mybutton"，

"version"： "0.0.1"，

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

"private"： false，

"dependencies"： {}，

"author"： "test"，

"description"："這是一個按鈕組件"

}

發布npm組件包

注冊或登錄npm用戶

如果已經有了賬號，輸入命令$npm login登錄即可，如果還沒賬號，可以登錄npm官方網站去注冊。登錄后輸入命令$npm whoami來驗證當前用戶名。

publish發布

進入dist文件夾，$cd dist執行$npm publish如果沒有報錯，則表示發包成功，可以登錄npm官網，查看名下是否有一個叫mybutton組件包。

組件包引用

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

import mybutton/mybutton.css

Vue.use（mybutton）

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

到此一個npm組件包就已經成功的從發布到引用了。

npm官網服務可以為個人提供開發的方便，同時還可以允許別人來下載使用你的組件，也正因為可能會有大量用戶正在使用你的npm包，所以你若想在npm unpublish并不會那么容易。