通用元件庫

元件編寫：

1. 先用vue腳手架搭建一個項目：

vue create common-component
           

1. package.json裡修改部配置設定置：
   • 為了能夠向外部提供元件，須修改private字段的值為false
   • 同時還需要新增main字段，它代表入口檔案，指向最終編譯後的封包件，在這裡其值設定為“./dist/common-component.common.js”
   • 在scripts字段中新增一個指令腳本，如：

在該指令中–target屬性表示建構目标，預設為應用模式，這裡需要設定為lib，表示啟用庫模式；–name屬性表示建構的名稱，可以與package.json檔案中的name字段的值不相同；最後一個參數表示入口檔案，預設為src/App.vue，在這裡我們修改為了./src/index.js

1. 在components下建立CommonTable.vue檔案，裡面.vue檔案名和具體内容自己定義
2. 在src目錄下建立一個index.js檔案，試着将componets/CommonTable.vue元件導出

   

   

   在上圖中可以看出導出的是ComponentsLib，若是還想導出其它的、自己建立的vue檔案，可以類似于添加CommonTable元件一樣進行添加
3. 在整體common-component檔案夾下執行指令行:

npm run build-lib
           

至此通用元件就建立完成啦！！

釋出到npm：

1. 首先要有一個npm賬号，沒有可去官網注冊

2. 設定npm的registry位址：在cmd視窗中輸入npm config set registry “需要釋出的npm位址”

   （我此處釋出的為：https://registry.npmjs.org/）

3. 使用賬号登入npm：在cmd視窗中輸入npm login，後續就按提示輸入正确的資訊即可

4. npm publish

   （此處執行後可能會報403錯誤，原因：所要publish的包的name和npmjs網上已經被别人注冊了（存在了）。如下圖：）

   

   解決方案：去package.json檔案裡，換把name的值換掉（如果還是出現以上錯誤，繼續重複此解決方案）

   

   publish成功過後，可登入npm官網檢視：

   

至此就釋出完成啦！！

使用方法：

1. 在其他vue項目中（例如：use-components），首先檢視一下鏡像源：

   npm config get registry

   如果鏡像源不是https://registry.npmjs.org/，則更改為：

1. 在use-components中安裝引入一下該通用元件：

npm i common-component12
           

1. 在main.js中導入并注冊該元件

1. 在想用的地方使用

   

效果圖如下：

至此，本文章結束啦！！