創建一個自己的Vue UI組件庫,並將它發佈在npm上

来源:https://www.cnblogs.com/rope/archive/2019/10/08/11634160.html

本文僅限於入門級,沒有成規模製作,希望能對你有所幫助。 因為在開發多個項目中可能會用到同一個組件,那麼我們通過複製粘貼的形式更新,無異於是笨拙的,我們可以通過上傳到npm後,不斷迭代npm包來實現更新。 前期準備 初始化project 這裡我們使用 來初始化一個vue項目。 or 首先我們來開發一個 ...


本文僅限於入門級,沒有成規模製作,希望能對你有所幫助。

因為在開發多個項目中可能會用到同一個組件,那麼我們通過複製粘貼的形式更新,無異於是笨拙的,我們可以通過上傳到npm後,不斷迭代npm包來實現更新。

前期準備

初始化project

這裡我們使用vue-cli來初始化一個vue項目。

npm install -g @vue/cli or yarn global add @vue/cli

vue create personal-component-set

首先我們來開發一個可復用的頂欄控制項,這裡是用vuetifyUI庫進行第二次開發。

npm install vuetify or yarn add vuetify

頂欄控制項代碼:

src/components/TopBar.vue

<template>
    <v-toolbar>
      <!-- 這裡v開頭的使用的是第三方ui組件庫 -->
        <v-toolbar-side-icon @click="toMainPage()"></v-toolbar-side-icon>
        <v-toolbar-title>{{title}}</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="../assets/logo.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', 'title'],
  methods: {
    openMyGithub() {
      // 自定義頭像被點擊的時候創建a標簽並且跳轉
      const a = document.createElement('a')
      a.target = '_blank'
      a.href = 'https://github.com/mufengsm'
      a.click()
    },
    toMainPage() {
      this.$emit('to-main-page')
    }
  }
}
</script>

<style scoped>
.top-bar-tooltip {
  font-size: 18px;
}

a {
  color: black;
}
</style>

配置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.jsonscripts 中:

"scripts": {
    "build-bundle": "vue-cli-service build --target lib --name personal-component-set ./src/components/index.js",
  },

命令解釋:--target打包為lib倉庫構建,--name項目名稱為personal-component-set,入口文件為./src/components/index.js

運行命令後就可以在dist文件夾中看到打包後的文件了,這裡我們選擇預設發佈我們的 **.common.js* 文件, 所以我們在 package.json中添加main屬性。

指定該屬性後, 當我們引用該組件庫時, 會預設載入 main 中指定的文件。

"main": "./dist/personal-component-set.common.js",

最後, 我們再配置 package.json中的 files屬性, 來配置我們想要發佈到 npm 上的文件有哪些。

"files": [
   "dist/*",
   "src/*",
   "public/*",
   "*.json",
   "*.js"
 ],

npm 發佈

首先去npm官網註冊一個賬號記得去查看郵箱郵件來認證郵箱,要不然會上傳會不成功。

然後在項目中打開命令行工具npm adduser or npm login輸入你註冊的用戶名密碼和郵箱,可以使用npm whoami查看登錄狀態。

在發佈之前, 我們修改一下項目的名稱(註意不要和npm已有項目名稱衝突,可以先去npm搜索一下), 推薦使用 @你註冊npm的用戶名/項目名稱 的命名方式。

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

npm run build-bundle

我們使用下麵的命令發佈我們的項目:

npm publish --access public

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

測試使用

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

npm install --save @你註冊npm的用戶名/項目名稱

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

import @你註冊npm的用戶名/項目名稱

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

<template>
  <!-- v-app是vuetify中的 -->
  <v-app id="app">
    <top-bar :sourceCodeLink="sourceCodeLink"></top-bar>
  </v-app>
</template>

如果你完全按照上面教程來的,可記得在src/main.js中引入我們文章開頭的第三方ui組件庫vuetify

// 使用第三方組件庫
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'

Vue.use(Vuetify)

最後

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

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

+++

參考文章:https://juejin.im/post/5b54120b5188251967307be4


您的分享是我們最大的動力!

更多相關文章
  • For example: 效果圖: ...
  • 寫在前面 在真正的前端開發中,我們很少去寫行內樣式和內嵌樣式,通常都是去引用外部樣式。 而在我們學習之初的外部樣式表都是用link引入的,但是當後來我們學習的逐漸深入,發現@import也可以引入樣式。那麼同樣是引入外部樣式,這兩者有什麼區別呢,下麵請跟隨我來詳細瞭解一下link和@import的區 ...
  • 1、我們先設置兩個盒子大小,顏色等等,然後定位重疊在一起,最後再進行動畫設置 例子如下: 2、效果如下: 恢復內容結束 ...
  • 一、屬性的認識 :link 表示滑鼠點擊之前,也稱為原始狀態; :visited 表示滑鼠點擊之後狀態; :hover 表示滑鼠懸停狀態; :active 表示滑鼠點擊狀態; L-V-H-A LV愛 HA恨 二、例子 運行結果是: 1、初始,未訪問狀態 2、滑鼠懸停時狀態 3、點擊是狀態 4、點擊之 ...
  • 大家好!先上圖看看本次案例的整體效果。 實現思路: 實現步驟如下: store: 以上就是大轉盤抽獎核心步驟的整體思路,歡迎討論。 Vue.js實戰之游戲抽獎系列全集 ↓↓↓↓↓↓↓↓↓↓↓ 【Vue.js實戰案例】- Vue.js實現老虎-機抽獎總結 【Vue.js實戰案例】- Vue.js實現九 ...
  • 參考:https://blog.csdn.net/xxjmlgb/article/details/49467717 ...
  • 解構:ES6允許按照一定模式,從數組和對象中提取值,對變數進行賦值。 對象的解構與數組有一個重要的不同。數組的元素是按次序排列的,變數的取值由他的位置決定;而對象的屬性沒有次序,變數必須與屬性同名,才能取到正確的值。 變數解構賦值的用途:交換變數的值,從函數返回多個值,函數參數的定義,提取JSON數 ...
  • Let:用來聲明變數,但是所聲明的變數,只在let命令所在的代碼塊內生效。 變數提升:變數可以在聲明之前使用,值為undefined。 暫時性死區:在代碼塊內,使用let命令聲明變數之前,該變數都是不可用的。 不允許重覆聲明:let不允許在相同作用域內,重覆聲明同一變數。 Const:const聲明 ...
一周排行
  • 比如要拆分“呵呵呵90909086676喝喝999”,下麵當type=0返回的是中文字元串“呵呵呵,喝喝”,type=1返回的是數字字元串“90909086676,999”, private string GetStrings(string str,int type=0) { IList<strin ...
  • Swagger一個優秀的Api介面文檔生成工具。Swagger可以可以動態生成Api介面文檔,有效的降低前後端人員關於Api介面的溝通成本,促進項目高效開發。 1、使用NuGet安裝最新的包:Swashbuckle.AspNetCore。 2、編輯項目文件(NetCoreTemplate.Web.c ...
  • 2020 年 7 月 30 日, 由.NET基金會和微軟 將舉辦一個線上和為期一天的活動,包括 微軟 .NET 團隊的演講者以及社區的演講者。本次線上大會 專註.NET框架構建微服務,演講者分享構建和部署雲原生應用程式的最佳實踐、模式、提示和技巧。有關更多信息和隨時瞭解情況:https://focu... ...
  • #abp框架Excel導出——基於vue #1.技術棧 ##1.1 前端採用vue,官方提供 UI套件用的是iview ##1.2 後臺是abp——aspnetboilerplate 即abp v1,https://github.com/aspnetboilerplate/aspnetboilerp ...
  • 前言 本文的文字及圖片來源於網路,僅供學習、交流使用,不具有任何商業用途,版權歸原作者所有,如有問題請及時聯繫我們以作處理。 作者:碧茂大數據 PS:如有需要Python學習資料的小伙伴可以加下方的群去找免費管理員領取 input()輸入 Python提供了 input() 內置函數從標準輸入讀入一 ...
  • 從12年到20年,python以肉眼可見的趨勢超過了java,成為了當今It界人人皆知的編程語言。 python為什麼這麼火? 網路編程語言搜索指數 適合初學者 Python具有語法簡單、語句清晰的特點,這就讓初學者在學習階段可以把精力集中在編程對象和思維方法上。 大佬都在用 Google,YouT ...
  • 在社會上存在一種普遍的對培訓機構的學生一種歧視的現象,具體表現在,比如:當你去公司面試的時候,一旦你說了你是培訓機構出來的,那麼基本上你就涼了,那麼你瞞著不說,然後又通過了面試成功入職,但是以後一旦在公司被髮現有培訓經歷,可能會面臨被降薪,甚至被辭退,培訓機構出來的學生,在用人單位眼裡就是能力低下的 ...
  • from typing import List# 這道題看了大佬寫的代碼,經過自己的理解寫出來了。# 從最外圍的四周找有沒有為O的,如果有的話就進入深搜函數,然後深搜遍歷# 判斷上下左右的位置是否為Oclass Solution: def solve(self, board: List[List[s ...
  • import requests; import re; import os; # 1.請求網頁 header = { "user-agent":'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_5) AppleWebKit/537.36 (KHTML, li ...
  • import requests; import re; import os; import parsel; 1.請求網頁 header = { "user-agent":'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_5) AppleWebKit/537. ...