初始化 project
這里我們使用官方的 vue-cli 初始化一個(gè) Vue 項(xiàng)目
npm install -g @vue/cli
vue create mste-component
進(jìn)入我們新建的項(xiàng)目, 讓我們看看當(dāng)前的項(xiàng)目文件:
接下來讓我們寫一個(gè)簡(jiǎn)單的?Vue component. 這里我寫了一個(gè)簡(jiǎn)單的頂欄控件, 用來展示.
配置 project
下面我們來配置當(dāng)前項(xiàng)目, 以使其可以發(fā)布到 npm 上.
首先我們編輯入口文件src/components/index.js, 使其被作為 UI 庫(kù)導(dǎo)入時(shí)能自動(dòng)在Vue中注冊(cè)我們的 Component:
import Vuefrom 'vue'
import Buttonfrom '../components/Button.vue'
import Iconfrom '../components/Icon.vue'
const Components = {
Button,
? ? Icon
}
Object.keys(Components).forEach(name=> {
Vue.component(name, Components[name])
})
export default Components
接下來我們添加 build 項(xiàng)目的腳本到package.json的scripts中:
其中?--name libraryName?指定的是要發(fā)布的Library的名稱, 我們執(zhí)行上面新加的腳本:
npm run build-bundle
可以看到 build 生成了各種版本可以用于發(fā)布的js文件
這里我們選擇默認(rèn)發(fā)布我們的 *.common.js?文件, 所以我們?cè)?package.json中添加main屬性.
指定該屬性后, 當(dāng)我們引用該組件庫(kù)時(shí), 會(huì)默認(rèn)加載 main 中指定的文件.
最后, 我們?cè)倥渲?package.json中的?files屬性, 來配置我們想要發(fā)布到 npm 上的文件路徑.
我們這里將用戶引用我們的組件庫(kù)可能用到的所有文件都放進(jìn)來:
npm 發(fā)布
首先我們注冊(cè)一個(gè)?npm?賬號(hào) (如果已有賬號(hào), 可以跳過此步驟)
npm add user// 按照提示輸入用戶名, 郵箱等即可復(fù)制代碼
然后使用npm login登錄注冊(cè)號(hào)的狀態(tài)
登錄后可以使用npm whoami查看登錄狀態(tài)
在發(fā)布之前, 我們修改一下項(xiàng)目的名稱(注意不要和已有項(xiàng)目名稱沖突), 推薦使用 @username/projectName 的命名方式.
接下來我們就可以發(fā)布我們的 UI 組件庫(kù)了, 在發(fā)布之前我們?cè)倬幾g一次, 讓build出的文件為我們最新的修改:
npm run build-bundle
我們使用下面的命令發(fā)布我們的項(xiàng)目:
npm publish --access public
需要注意的是?package.json中指定的version屬性: 每次要更新我們的組件庫(kù)都需要更新一下version(畢竟同一個(gè)version?的代碼不同,很容易讓人產(chǎn)生疑惑)
測(cè)試使用
這樣我們就完成了自己的 UI 組件庫(kù)的發(fā)布. 接下來我們可以在任何需要使用到該組件庫(kù)的項(xiàng)目中使用:
npm install --save @ssthouse/mste-component
然后在index文件 (如src/main.js) 中引入該組件庫(kù):
import '@ssthouse/mste-component'
接下來我們就可以在?Vue的template中使用組件庫(kù)中的?Component了:
最后
經(jīng)過上面這些步驟后, 我們就擁有了一個(gè)屬于自己的組件庫(kù)了. 我們可以隨時(shí)更新, 發(fā)布自己新版的組件庫(kù).
而依賴了該組件庫(kù)的項(xiàng)目只需要使用簡(jiǎn)單的 npm 命令即可更新
這里我們使用官方的 vue-cli 初始化一個(gè) Vue 項(xiàng)目
