vue元件庫的編寫和發布到npm

本篇文章主要以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檔案

// 匯入元件，元件必須宣告name

import calendar from "./src/calendar.vue"
// 為元件提供install安裝方法，供按需引入
calendar.install = function(vue) 
// 預設匯出元件
export default calendar

// 匯入元件，元件必須宣告name

import calendar from "./calendar"
const components = [ calendar ]
const install = function(vue) 
// 判斷是否直接引入檔案
if (typeof window !== "undefined" && window.vue) 
// 預設匯出元件
export default 

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

"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 config set registry

npm login

npm publish

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的時候，總是要在專案分支中修改，然後同步到主線上，這樣容易導致分支修改後沒有同步到主線，慢慢的就會導致元件版本不統一，而導致公升級元件很繁瑣，最後可能都要去維護多個元件的不同版本，這樣不是我們想要的。所以就打算將元件...