建立, 發佈本身的 Vue UI 組件庫

建立, 發佈本身的 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

D3-blog

你也能夠在這裏找到我 : )

github 主頁

知乎專欄

掘金

想直接聯繫我 ?

郵箱: ssthouse@163.com

微信: