本篇文章主要以vue-cli3搭建專案,將開發的元件庫發布到npm中。讓更多的人或同事使用到自己所開發的元件庫。公司也能更好的維護相關元件。
1)使用vue-cli3搭建專案,元件庫資料夾存放位置
2)全域性註冊元件庫
3)修改編輯package.json,準備發布npm
4) 註冊並登入npm,發布
vue-cli3搭建專案參考文件
1) 在src下面新建plugins/資料夾、plugins/index.js檔案(用於註冊所有元件庫)、plugins/calendar/index.js檔案(對外暴露元件)
2)plugins/calendar/index.js檔案
3)plugins/index.js// 匯入元件,元件必須宣告name
import calendar from "./src/calendar.vue"
// 為元件提供install安裝方法,供按需引入
calendar.install = function(vue)
// 預設匯出元件
export default calendar
1) main.js// 匯入元件,元件必須宣告name
import calendar from "./calendar"
const components = [ calendar ]
const install = function(vue)
// 判斷是否直接引入檔案
if (typeof window !== "undefined" && window.vue)
// 預設匯出元件
export default
2)相關pakage.json配置import vue from 'vue'
// 匯入元件庫
import calendar from './plugins/index'
// 註冊元件庫
vue.use(calendar)
vue.config.productiontip = false
new vue(,
name:元件庫名稱,在npm元件中確保名稱唯一,否則不能註冊成功
version:版本
description: 元件庫描述
main: 入口檔案,編譯後的包檔案
keyword:關鍵字 使用者可以根據關鍵字搜尋出元件庫
private: 是否私有,為false才能發布到npm
license:開源協議,可以為mit
3)執行編譯元件庫"name": "v-******-calendar",
"version": "0.1.0",
"description": "this is a ****** calendar",
"main": "lib/******calendar.umd.min.js",
"keyword": "calendar",
"private": false,
"license": "mit",
npm run lib
如果配置了**映象,先設定回npm映象:
npm config set registry
1)登入npm
npm login
2)發布到npm
npm publish
3)發布成功後就可以在npm查到了
vue元件發布到npm,類似element ui
1.建立webpack 類專案 vue init webpack demo 2.目錄 3.編寫元件 packages timer就是編寫的元件,跟普通元件無差別,這裡只是用於測試 4.修改package.json 畫紅線部分即是需要修改或新增的內容 5.修改webpack.config.js 畫橢圓...
封裝vue元件庫,發布npm
元件庫的開發和平時專案中元件的開發過程是一樣的,不同的是元件庫作為乙個外掛程式使用,使用vue.use 註冊外掛程式。vue.use方法可以接收乙個函式,如果是函式會直接呼叫這個函式 可以傳入物件,傳入物件,會呼叫這個物件的install方法。vue規定外掛程式應該暴露乙個install方法。這個方...
自定義vue元件發布到npm
為什麼會有這個想法呢,主要是vue專案中自定義的元件在多個專案中使用。導致修改bug的時候,總是要在專案分支中修改,然後同步到主線上,這樣容易導致分支修改後沒有同步到主線,慢慢的就會導致元件版本不統一,而導致公升級元件很繁瑣,最後可能都要去維護多個元件的不同版本,這樣不是我們想要的。所以就打算將元件...