元件庫的開發和平時專案中元件的開發過程是一樣的，不同的是元件庫作為乙個外掛程式使用，使用vue.use()註冊外掛程式。
vue.use方法可以接收乙個函式，如果是函式會直接呼叫這個函式；可以傳入物件，傳入物件，會呼叫這個物件的install方法。
vue規定外掛程式應該暴露乙個install方法。這個方法的第乙個引數是vue構造器，第二個引數是乙個可選的選項物件。
如果是直接引入元件庫(如：上傳***引入)，那麼需要在封裝元件庫時判斷是否是window，並且window有vue，就install(window.vue)
元件開發
在根目錄下新建乙個packages資料夾存放所有的元件，在packages目錄下新建乙個button資料夾，下面新建乙個main.vue和index.js
main.vue檔案變形元件相關的業務，和平時專案中開發的元件一樣
="yun-button"
:class
="[`yun-button--$`
,]":disabled=
"disabled"
@click=
"handleclick"
>
"icon"
:class
="icon"
>
<
/i>
"$slots.default"
>
<
/slot>
<
/span>
<
/button>
<
/template>
export
default
, plain:
, round:
, circle:
, icon:
, disabled:},
methods:}}
<
/script>
index.js檔案中主要是編寫乙個install，供按需引入
// 匯入元件，元件必須宣告 name
import mybutton from
'./src/button'
mybutton.
install
=function
(vue)
export
default mybutton
button元件已經封裝好了，回到packages目錄新建乙個index.js檔案，該檔案作為整個元件庫的入口，在該檔案中引入所有的元件，遍歷元件新增install方法，以及對直接引入元件庫做處理
import mybutton from
'./button'
const components =
[mybutton]
// 定義 install 方法，接收 vue 作為引數。如果使用 use 註冊外掛程式，則所有的元件都將被註冊
const
install
=function
(vue))}
// 判斷是否直接引入檔案(通過連線引入元件庫)，如果是，就不用呼叫 vue.use()if(
typeof window !==
'undefined'
&& window.vue)
export
default
在專案的main.js中引入並且使用vue.use()註冊
import myui from
'../packages'
vue.
use(myui)
根目錄新增vue.config.js檔案修改打包配置
const path = require('path')
module.exports =
},// 擴充套件 webpack 配置，使 packages 加入編譯
chainwebpack: config => )
}}
package.json新增打包命令把packages打包"lib": "vue-cli-service build --target lib packages/index.js"
**上傳github託管
修改package.json：private屬性值改為 false，私有包npm不讓上傳；name屬性值要npm上沒有的；新增main屬性，值為入口檔案路徑，該屬性是一定要指定的(如："main": "dist/myui.umd.min.js")，將來匯入到專案將會預設匯入該檔案
根目錄新增.npmignore檔案，用於配置忽略檔案不被npm上傳
上傳npm：源需要是npm，不能是**源；npm login登入(需要先註冊賬號)；npm publish發布
以後修改後再上傳需要修改package.json中的version屬性，否則上傳不了
封裝vue元件並發布到npm上
1.使用webpack 模板建立乙個vue專案，命令 vue init webpack kingtreebtn 新建專案目錄如下 2.在src目錄下新建lib目錄存放元件原始碼 3.元件封裝完後新建元件出口檔案index.js，檔案內容如下 4.修改package.json檔案 5.修改webpac...
Npm 發布 Vue 元件教程
平時我們在開發的時候經常使用npm安裝各種元件。今天我們就來嘗試下製作乙個自己的元件發布到npm上。k progress npm install s k progress main.js import k progress import k progress dist k progress.css ...
vue元件庫的編寫和發布到npm
本篇文章主要以vue cli3搭建專案，將開發的元件庫發布到npm中。讓更多的人或同事使用到自己所開發的元件庫。公司也能更好的維護相關元件。1 使用vue cli3搭建專案，元件庫資料夾存放位置 2 全域性註冊元件庫 3 修改編輯package.json，準備發布npm 4 註冊並登入npm，發布 ...