怎樣創建前端公共vue組件庫

參考文章：https://www.cnblogs.com/bien94/p/12034249.html

目前電腦上裝的是vue-cli4

執行命令創建一個項目：

vue create fcom（項目名稱）

看package.json文件

 

 

 private字段改為false，證明不是私有的

 

 

 

增加main字段：它代表入口文件，指向最終編譯后的包文件，在這里其值設置為"./dist/fcom.js"

此外，在scripts字段中新增一個命令腳本，如："build-lib": "vue-cli-service build --target lib --name fcom ./src/index.js"；在該命令中--target屬性表示構建目標，默認為應用模式，這里需要設置為lib，表示啟用庫模式；--name屬性表示構建的名稱，可以與package.json文件中的name字段的值不相同；最后一個參數表示入口文件，默認為src/App.vue，在這里我們修改為了./src/index.js。最終的修改情況如下圖所示：

 

 

 接下來，我們在src目錄下建立一個index.js文件，我們試着將componets/HelloWord.vue組件導出，而HelloWord.vue是構建工程時默認生成的。下面是index.js文件的內容：

import Vue from "vue"
import HelloWorld from './components/HelloWorld.vue'

const componentsLib = {
    HelloWorld
}

Object.keys(componentsLib).forEach(name =>{
    Vue.component(name,componentsLib[name])
})

export default componentsLib

在上面代碼中可以看出導出的是ComponentsLib，若是還想導出其它的、自己創建的vue文件，可以類似於添加HelloWord組件一樣進行添加。接着在根目錄下打開cmd窗口，輸入npm run build-lib命令，編譯結果如下圖所示：

 

 

 在根目錄下會生成dist文件夾，其里面的文件如下圖所示：

 

 

 到此，組件已經完成構建了。

下面是怎樣將組件發布到npm的步驟

首先是注冊npm：

1.官網注冊
  https://www.npmjs.com/signup
2.命令行注冊
  npm adduser   //按照提示輸入用戶名,郵箱等即可
3.注冊后登陸
  npm login    //按照提示輸入用戶名,密碼,郵箱等即可
4.登陸后查看登陸狀態(可忽略)
  npm whoami

 

 

 

 

https://www.npmjs.com/?track=newUserCreated

這個密碼，設置了幾次，都被占用了，后來系統提示，會記錄在google賬號中，不用記錄

這里我就記下，賬號  fengqinghai    郵箱163   密碼：J#n7&HzAegBsnq#

執行npm adduser

 

 

 這里的密碼是隱藏的，實際已經輸入了

npm login

 

 

 打包項目：是為了確認在發布之前是最新的代碼，這個命令根據自己配的命令來寫

npm run build-lib

發布代碼到npm上：需要在郵箱驗證通過后才能正常發布，等待郵箱驗證郵件

npm publish --access public

也有這個命令：不知道上面好還是下面好

npm publish

 

 

 登陸npm官網查看發布代碼(UI組件庫創建完成)

個人頭像->profile settings->package

測試組件（新建/已有項目中安裝）

安裝

npm install --save @username/component-name //@npm官網注冊username/組件項目名 == @username/component-name

然后引入

import '@username/component-name'

使用即可

 

 

 

 

 

 

 

。