前言

在使用 Vue 進行日常開發時, 我們經常會用到一些開源的 UI 庫, 如: Element-UI_, _Vuetify 等.

只需一行命令, 即可方便的將這些庫引入我們當前的項目:

npm install vuetify// oryarn add vuetify

但是當我們自己開發了一個 _UI Component_, 需要在多個項目中使用的時候呢? 我們首先想到的可能是直接復制一份過去對嗎?

這樣做是很方便, 但是有兩個問題:

• 當該 component 需要更新時, 我們需要手動維護所有用到該 component 的更新
• 當有多個 component 需要共享時, 手動復制過于繁瑣

那么, 我們為什么不發布一個 UI 組件庫給自己用呢?

本文筆者將介紹如何一步步, 創建并發布自己的 Vue UI 組件庫.

初始化 project

這里我們使用官方的 vue-cli 初始化一個 Vue 項目

npm install -g @vue/cli# oryarn global add @vue/clivue create personal-component-set

進入我們新建的項目, 讓我們看看當前的項目文件:

接下來讓我們寫一個簡單的 _Vue component_. 這里我寫了一個簡單的頂欄控件, 用來展示: 頁面標題, 我的個人信息, github 源碼鏈接等信息.

代碼如下:

<template><v-toolbar><v-toolbar-side-icon @click="toMainPage()"></v-toolbar-side-icon><v-toolbar-title>Visual Explain</v-toolbar-title><v-spacer></v-spacer><v-toolbar-items class="hidden-sm-and-down"><v-btn flat @click="openMyGithub()"><v-avatar size=42><img src="https://avatars3.githubusercontent.com/u/10973821?s=460&v=4"></v-avatar><span style="margin-left:8px;">About me: ssthouse</span></v-btn><v-tooltip bottom><v-btn slot="activator" flat :href="sourceCodeLink" rel="external nofollow" ><v-avatar size=42><img src="https://assets-cdn.github.com/images/modules/logos_page/GitHub-Mark.png"></v-avatar>Source Code</v-btn><span class="top-bar-tooltip">Welcome to fork & star <br/> ; )</span></v-tooltip></v-toolbar-items></v-toolbar></template><script>export default {props: ['sourceCodeLink'],methods: {openMyGithub() {const a = document.createElement('a')a.target = '_blank'a.a.click()},toMainPage() {this.$emit('to-main-page')}}}</script><style scoped>.top-bar-tooltip {font-size: 18px;}a {color: black;}</style>

以上代碼構成了一個非常簡單的 Vue component_, 提供了一個 _props: sourceCodeLink 方便定制化跳轉鏈接, 提供了一個 _event: to-main-page_, 用于觸發用戶跳轉回主頁的回調.

效果如圖:

配置 project

下面我們來配置當前項目, 以使其可以發布到 npm 上.

首先我們編輯入口文件 src/components/index.js, 使其被作為 UI 庫導入時能自動在Vue中注冊我們的 Component:

import Vue from 'vue'import TopBar from './TopBar.vue'const Components = {TopBar}Object.keys(Components).forEach(name => {Vue.component(name, Components[name])})export default Components

接下來我們添加 build 項目的腳本到 package.json 的 scripts 中:

其中 --name libraryName 指定的是要發布的Library的名稱, 我們執行上面新加的腳本:

可以看到 build 生成了各種版本可以用于發布的js文件

這里我們選擇默認發布我們的 *.common.js 文件, 所以我們在 package.json中添加main屬性.

指定該屬性后, 當我們引用該組件庫時, 會默認加載 main 中指定的文件.

最后, 我們再配置 package.json中的 files屬性, 來配置我們想要發布到 npm 上的文件路徑.

我們這里將用戶引用我們的組件庫可能用到的所有文件都放進來:

npm 發布

首先我們注冊一個 npm 賬號 (如果已有賬號, 可以跳過此步驟)

npm add user// 按照提示輸入用戶名, 郵箱等即可

然后使用 npm login 登錄注冊號的狀態

登錄后可以使用 npm whoami 查看登錄狀態

在發布之前, 我們修改一下項目的名稱(注意不要和已有項目名稱沖突), 推薦使用 @username/projectName 的命名方式.

接下來我們就可以發布我們的 UI 組件庫了, 在發布之前我們再編譯一次, 讓build出的文件為我們最新的修改:

npm run build-bundle


我們使用下面的命令發布我們的項目:

npm publish --access public

需要注意的是 package.json中指定的version屬性: 每次要更新我們的組件庫都需要更新一下version(畢竟同一個version 的代碼不同,很容易讓人產生疑惑)

測試使用

這樣我們就完成了自己的 UI 組件庫的發布. 接下來我們可以在任何需要使用到該組件庫的項目中使用:

npm install --save @ssthouse/personal-component-set

然后在index文件 (如src/main.js) 中引入該組件庫:

import '@ssthouse/personal-component-set'

接下來我們就可以在 Vue的template中使用組件庫中的 Component了:

<template><v-app id="app"><top-bar :sourceCodeLink="sourceCodeLink"></top-bar><router-view/></v-app></template>

最后

經過上面這些步驟后, 我們就擁有了一個屬于自己的組件庫了. 我們可以隨時更新, 發布自己新版的組件庫.

而依賴了該組件庫的項目只需要使用簡單的 npm 命令即可更新 : )

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。