建立, 釋出自己的 Vue UI 元件庫
前言
在使用 Vue 進行日常開發時, 我們經常會用到一些開源的 UI 庫, 如: Element-UI_, _Vuetify 等.
隻需一行指令, 即可友善的将這些庫引入我們目前的項目:
npm install vuetify
// or
yarn add vuetify 但是當我們自己開發了一個 _UI Component_, 需要在多個項目中使用的時候呢? 我們首先想到的可能是直接複制一份過去對嗎?
這樣做是很友善, 但是有兩個問題:
- 當該 component 需要更新時, 我們需要手動維護所有用到該 component 的更新
- 當有多個 component 需要共享時, 手動複制過于繁瑣
那麼, 我們為什麼不釋出一個 UI 元件庫給自己用呢?
本文筆者将介紹如何一步步, 建立并釋出自己的 Vue UI 元件庫.
初始化 project
這裡我們使用官方的 vue-cli 初始化一個 Vue 項目
npm install -g @vue/cli
# or
yarn global add @vue/cli
vue 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">
<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.href = 'https://github.com/ssthouse'
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 指令即可更新 : )
對資料可視化和 D3.js 感興趣 ?
這裡是我的 D3.js 、 資料可視化 的 github 位址, 歡迎 start & fork :tada:
D3-blog