李廣宏
隨著前端技術的不斷發展,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文件內容
.button {line-height: 40px;background: red;color: #fff; }
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并不會那么容易。