這篇文章將為大家詳細(xì)講解有關(guān)創(chuàng)建,發(fā)布自己的 Vue UI 組件庫,小編覺得挺實用的,因此分享給大家做個參考,希望大家閱讀完這篇文章后可以有所收獲。
前言
在使用 Vue 進(jìn)行日常開發(fā)時, 我們經(jīng)常會用到一些開源的 UI 庫, 如: Element-UI_, _Vuetify 等.
只需一行命令, 即可方便的將這些庫引入我們當(dāng)前的項目:
npm install vuetify // or yarn add vuetify
但是當(dāng)我們自己開發(fā)了一個 _UI Component_, 需要在多個項目中使用的時候呢? 我們首先想到的可能是直接復(fù)制一份過去對嗎?
這樣做是很方便, 但是有兩個問題:
當(dāng)該 component 需要更新時, 我們需要手動維護(hù)所有用到該 component 的更新
當(dāng)有多個 component 需要共享時, 手動復(fù)制過于繁瑣
那么, 我們?yōu)槭裁床话l(fā)布一個 UI 組件庫給自己用呢?
本文筆者將介紹如何一步步, 創(chuàng)建并發(fā)布自己的 Vue UI 組件庫.
初始化 project
這里我們使用官方的 vue-cli 初始化一個 Vue 項目
npm install -g @vue/cli # or yarn global add @vue/cli vue create personal-component-set
進(jìn)入我們新建的項目, 讓我們看看當(dāng)前的項目文件:
接下來讓我們寫一個簡單的 _Vue component_. 這里我寫了一個簡單的頂欄控件, 用來展示: 頁面標(biāo)題, 我的個人信息, 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 >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.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>
以上代碼構(gòu)成了一個非常簡單的 Vue component_, 提供了一個 _props: sourceCodeLink 方便定制化跳轉(zhuǎn)鏈接, 提供了一個 _event: to-main-page_, 用于觸發(fā)用戶跳轉(zhuǎn)回主頁的回調(diào).
效果如圖:
配置 project
下面我們來配置當(dāng)前項目, 以使其可以發(fā)布到 npm 上.
首先我們編輯入口文件 src/components/index.js
, 使其被作為 UI 庫導(dǎo)入時能自動在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
指定的是要發(fā)布的Library的名稱, 我們執(zhí)行上面新加的腳本:
可以看到 build 生成了各種版本可以用于發(fā)布的js文件
這里我們選擇默認(rèn)發(fā)布我們的 *.common.js
文件, 所以我們在 package.json
中添加main屬性.
指定該屬性后, 當(dāng)我們引用該組件庫時, 會默認(rèn)加載 main 中指定的文件.
最后, 我們再配置 package.json
中的 files屬性, 來配置我們想要發(fā)布到 npm 上的文件路徑.
我們這里將用戶引用我們的組件庫可能用到的所有文件都放進(jìn)來:
npm 發(fā)布
首先我們注冊一個 npm 賬號 (如果已有賬號, 可以跳過此步驟)
npm add user // 按照提示輸入用戶名, 郵箱等即可
然后使用 npm login
登錄注冊號的狀態(tài)
登錄后可以使用 npm whoami
查看登錄狀態(tài)
在發(fā)布之前, 我們修改一下項目的名稱(注意不要和已有項目名稱沖突), 推薦使用 @username/projectName 的命名方式.
接下來我們就可以發(fā)布我們的 UI 組件庫了, 在發(fā)布之前我們再編譯一次, 讓build出的文件為我們最新的修改:
npm run build-bundle
我們使用下面的命令發(fā)布我們的項目:
npm publish --access public
需要注意的是 package.json中指定的version屬性: 每次要更新我們的組件庫都需要更新一下version(畢竟同一個version 的代碼不同,很容易讓人產(chǎn)生疑惑)
測試使用
這樣我們就完成了自己的 UI 組件庫的發(fā)布. 接下來我們可以在任何需要使用到該組件庫的項目中使用:
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>
最后
經(jīng)過上面這些步驟后, 我們就擁有了一個屬于自己的組件庫了. 我們可以隨時更新, 發(fā)布自己新版的組件庫.
而依賴了該組件庫的項目只需要使用簡單的 npm 命令即可更新 : )
關(guān)于“創(chuàng)建,發(fā)布自己的 Vue UI 組件庫”這篇文章就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,使各位可以學(xué)到更多知識,如果覺得文章不錯,請把它分享出去讓更多的人看到。
本文題目:創(chuàng)建,發(fā)布自己的VueUI組件庫-創(chuàng)新互聯(lián)
網(wǎng)站路徑:http://aaarwkj.com/article18/geogp.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站改版、網(wǎng)站導(dǎo)航、靜態(tài)網(wǎng)站、域名注冊、網(wǎng)頁設(shè)計公司、營銷型網(wǎng)站建設(shè)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容