前言

在使用 Vue 進(jìn)行日常開(kāi)發(fā)時(shí), 我們經(jīng)常會(huì)用到一些開(kāi)源的 UI 庫(kù), 如: Element-UI_, _Vuetify 等.

只需一行命令, 即可方便的將這些庫(kù)引入我們當(dāng)前的項(xiàng)目:

npm install vuetify
// or
yarn add vuetify

但是當(dāng)我們自己開(kāi)發(fā)了一個(gè) _UI Component_, 需要在多個(gè)項(xiàng)目中使用的時(shí)候呢? 我們首先想到的可能是直接復(fù)制一份過(guò)去對(duì)嗎?

這樣做是很方便, 但是有兩個(gè)問(wèn)題:

• 當(dāng)該 component 需要更新時(shí), 我們需要手動(dòng)維護(hù)所有用到該 component 的更新
• 當(dāng)有多個(gè) component 需要共享時(shí), 手動(dòng)復(fù)制過(guò)于繁瑣

那么, 我們?yōu)槭裁床话l(fā)布一個(gè) UI 組件庫(kù)給自己用呢?

本文筆者將介紹如何一步步, 創(chuàng)建并發(fā)布自己的 Vue UI 組件庫(kù).

初始化 project

這里我們使用官方的 vue-cli 初始化一個(gè) Vue 項(xiàng)目

npm install -g @vue/cli
# or
yarn global add @vue/cli
vue create personal-component-set

進(jìn)入我們新建的項(xiàng)目, 讓我們看看當(dāng)前的項(xiàng)目文件:

接下來(lái)讓我們寫(xiě)一個(gè)簡(jiǎn)單的 _Vue component_. 這里我寫(xiě)了一個(gè)簡(jiǎn)單的頂欄控件, 用來(lái)展示: 頁(yè)面標(biāo)題, 我的個(gè)人信息, 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>

以上代碼構(gòu)成了一個(gè)非常簡(jiǎn)單的 Vue component_, 提供了一個(gè) _props: sourceCodeLink 方便定制化跳轉(zhuǎn)鏈接, 提供了一個(gè) _event: to-main-page_, 用于觸發(fā)用戶(hù)跳轉(zhuǎn)回主頁(yè)的回調(diào).

效果如圖:

配置 project

下面我們來(lái)配置當(dāng)前項(xiàng)目, 以使其可以發(fā)布到 npm 上.

首先我們編輯入口文件 src/components/index.js, 使其被作為 UI 庫(kù)導(dǎo)入時(shí)能自動(dòng)在Vue中注冊(cè)我們的 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

接下來(lái)我們添加 build 項(xiàng)目的腳本到 package.json 的 scripts 中:

其中 --name libraryName 指定的是要發(fā)布的Library的名稱(chēng), 我們執(zhí)行上面新加的腳本:

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

這里我們選擇默認(rèn)發(fā)布我們的 *.common.js 文件, 所以我們?cè)?package.json中添加main屬性.

指定該屬性后, 當(dāng)我們引用該組件庫(kù)時(shí), 會(huì)默認(rèn)加載 main 中指定的文件.

最后, 我們?cè)倥渲?package.json中的 files屬性, 來(lái)配置我們想要發(fā)布到 npm 上的文件路徑.

我們這里將用戶(hù)引用我們的組件庫(kù)可能用到的所有文件都放進(jìn)來(lái):

npm 發(fā)布

首先我們注冊(cè)一個(gè) npm 賬號(hào) (如果已有賬號(hào), 可以跳過(guò)此步驟)

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

然后使用 npm login 登錄注冊(cè)號(hào)的狀態(tài)

登錄后可以使用 npm whoami 查看登錄狀態(tài)

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

接下來(lái)我們就可以發(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ā)布. 接下來(lái)我們可以在任何需要使用到該組件庫(kù)的項(xiàng)目中使用:

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

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

import '@ssthouse/personal-component-set'

接下來(lái)我們就可以在 Vue的template中使用組件庫(kù)中的 Component了:

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

最后

經(jīng)過(guò)上面這些步驟后, 我們就擁有了一個(gè)屬于自己的組件庫(kù)了. 我們可以隨時(shí)更新, 發(fā)布自己新版的組件庫(kù).

而依賴(lài)了該組件庫(kù)的項(xiàng)目只需要使用簡(jiǎn)單的 npm 命令即可更新 : )

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論