從零開始在NPM上發(fā)布一個Vue組件的方法步驟
TL;DR 本文細致講解了在NPM上發(fā)布一個Vue組件的全過程，包括創(chuàng)建項目、編寫組件、打包和發(fā)布四個環(huán)節(jié)。
創(chuàng)建項目
這里我們直接利用@vue/cli來生成項目。如果沒有安裝@vue/cli的話，可以使用以下方法進行安裝：
# 如果喜歡npm npm i -g @vue/cli # 如果喜歡yarn yarn global add @vue/cli
此外，如果安裝了npx（高版本的nodejs發(fā)行版會自帶這一工具）的話，還可以很方便地通過npx vue這一方式實現(xiàn)免安裝使用。
接下來就可以創(chuàng)建項目了，這里我們創(chuàng)建一個my-banner項目，里面將會包含一個Banner組件：
vue create my-banner
@vue/cli會提示你選擇一個預(yù)置（preset）的配置，這里我們直接選擇“default”（babel, eslint）就可以，之后@vue/cli會自動調(diào)用yarn或npm來進行依賴的下載。下載完成后就可以進入項目目錄了：
cd my-banner
此時的目錄結(jié)構(gòu)為：
├── README.md ├── babel.config.js ├── node_modules ├── package.json ├── public │ ├── favicon.ico │ └── index.html ├── src │ ├── App.vue │ ├── assets │ ├── components │ └── main.js └── yarn.lock
下面啟動開發(fā)環(huán)境本地服務(wù)器：
yarn serve
打開localhost:8080，就可以看到默認的首頁：
@vue/cli 3.0自動生成的默認首頁
編寫組件
我們現(xiàn)在開始編寫一個非常簡單的Banner組件。
<!-- src/components/Banner.vue -->
<template>
<div class="banner" :style="bannerStyles" :class="`banner__${position}`">
<slot></slot>
</div>
</template>
<script>
const defaultStyles = {
left: 0,
right: 0,
};
export default {
props: {
position: {
type: String,
default: 'top',
validator(position) {
return ['top', 'bottom'].indexOf(position) > -1;
},
},
styles: {
type: Object,
default: () => ({}),
},
},
data() {
return {
bannerStyles: {
...defaultStyles,
...this.styles,
},
};
},
};
</script>
<style lang="scss" scoped>
.banner {
padding: 12px;
background-color: #fcf6cd;
color: #f6a623;
text-align: left;
position: fixed;
z-index: 2;
}
.banner__top {
top: 0;
}
.banner__bottom {
bottom: 0;
}
</style>
我們將Banner.vue置于src/components目錄下，同時在該目錄下新建一個index.js文件，用來注冊Vue組件。
// src/components/index.js
import Vue from "vue";
import Banner from "./Banner.vue";
const Components = {
Banner
};
Object.keys(Components).forEach(name => {
Vue.component(name, Components[name]);
});
export default Components;
接下來我們修改一下@vue/cli自動生成的src/components/HelloWorld.vue文件，引用一下我們剛剛編寫的Banner組件：
<!-- src/components/HelloWorld.vue -->
<template>
<div class="hello">
<!-- 下面插入了我們剛剛編寫的Banner組件 -->
<Banner>This is a banner!</Banner>
<h1>{{ msg }}</h1>
<p>
For a guide and recipes on how to configure / customize this project,<br>
check out the
<a rel="external nofollow" target="_blank" rel="noopener">vue-cli documentation</a>.
</p>
<!-- 省略部分內(nèi)容 -->
</div>
</template>
<script>
<!-- 省略有關(guān)內(nèi)容 -->
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
<!-- 省略有關(guān)內(nèi)容 -->
</style>
修改一下項目的主入口main.js
// src/main.js
import Vue from 'vue';
import App from './App.vue';
// 引用我們的自定義組件
import "./components";
Vue.config.productionTip = false;
new Vue({
render: h => h(App),
}).$mount('#app');
因為前面定義style時使用了scss，所以還需要安裝兩個開發(fā)環(huán)境依賴項
yarn add sass-loader node-sass -D
最后執(zhí)行
yarn serve
就可以在localhost:8080看到效果了：
添加Banner后的頁面效果
可以看到，我們編寫的Banner組件已經(jīng)成功在頁面上渲染出來了。
打包
接下來，我們需要對這個組件進行打包。這里我們可以使用@vue/cli 3.0自帶的打包功能。打開package.json文件，在scripts中增加一項：
{
"scripts": {
"package": "vue-cli-service build --target lib --name my-banner ./src/components/index.js"
}
}
然后執(zhí)行yarn package，會在dist目錄下生成下列文件：
├── demo.html ├── my-banner.common.js ├── my-banner.common.js.map ├── my-banner.css ├── my-banner.umd.js ├── my-banner.umd.js.map ├── my-banner.umd.min.js └── my-banner.umd.min.js.map
接下來，需要將package.json中的main字段指向剛剛生成的庫文件。這里以commonjs為例（umd應(yīng)該也是沒問題的）：
{
"main": "./dist/my-banner.common.js"
}
然后，我們需要在package.json的files字段中聲明這個組件庫項目需要包含的文件：
{
"files": [
"dist/*",
"src/*",
"public/*",
"*.json",
"*.js"
]
}
這樣就可以打包階段就算是完成了。
發(fā)布
注冊NPM賬號并創(chuàng)建組織
首先登陸NPM官網(wǎng)
npmjs.com
注冊賬號，都是常規(guī)操作，需要填寫的有全名、郵箱、用戶名和密碼。之后郵箱會收到確認郵件，標(biāo)題為“Verify your npm email address”，發(fā)件人是“npm, Inc.”，點擊郵件中的鏈接就可以激活賬戶了。
登錄賬號，點擊右上角的頭像，選擇“Create an Organization”，就可以創(chuàng)建你自己的組織了。
創(chuàng)建組織
組織有兩種選項，支持私有發(fā)布的需要繳納每月7刀的“管理費”，而我們現(xiàn)在只需要發(fā)布一個公共的包，那就可以選擇免費版本。
選擇公開組織
本地命令行登陸npm
npm login
之后按提示輸入用戶名和密碼即可。
可以使用
npm whoami
來檢查登陸是否成功。如果成功的話，這條命令會返回你的用戶名。
給你的組件庫命名
你需要給你的這個組件庫起一個名字，這里用到的是package.json中的name字段。注意@后的名稱就填寫你剛剛創(chuàng)建的組織的名稱。
{
"name": "@abc/my-banner"
}
最終步驟：再次構(gòu)建與發(fā)布
最后，使用yarn package重新構(gòu)建一遍這個組件庫，然后使用：
npm publish --access public
來發(fā)布這個組件庫。
注意這里可能會報下面的錯誤
npm ERR! This package has been marked as private
npm ERR! Remove the 'private' field from the package.json to publish it.
解決辦法很簡單，按照提示刪除package.json中的private字段，或?qū)⑵湓O(shè)置為false都可以。
成果
順利發(fā)布后，就可以在你的組織頁面看到剛剛發(fā)布的這個包了。
發(fā)布成功
在此之后，你可以新建一個項目，然后
yarn add @abc/my-banner
來把你剛剛發(fā)布的這個包添加為依賴項。由于我們之前已經(jīng)在src/components/index.js中對組件進行了全局注冊，所以你現(xiàn)在可以直接在template中調(diào)用<Banner>。
總結(jié)
以上，我們就從零開始實現(xiàn)了一個Vue組件在npm上發(fā)布的流程，是不是很簡單呢？那么，現(xiàn)在就開始發(fā)布一個你自己的組件吧！希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家
參考文章
How to create and publish your own VueJS Component library on NPM using @vue/cli 3.0
相關(guān)文章
vue+axios 前端實現(xiàn)的常用攔截的代碼示例
這篇文章主要介紹了vue+axios 前端實現(xiàn)的常用攔截的代碼示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
Vue3利用組合式函數(shù)和Shared Worker實現(xiàn)后臺分片上傳
這篇文章主要為大家詳細介紹了Vue3如何利用組合式函數(shù)和Shared Worker實現(xiàn)后臺分片上傳(帶哈希計算),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-10-10
Vue?ElementUI在el-table中使用el-popover問題
這篇文章主要介紹了Vue?ElementUI在el-table中使用el-popover問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章主要介紹了如何在vue項目中使用百度地圖API，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下2021-04-04
下面小編就為大家?guī)硪黄赩ue過渡狀態(tài)實例講解。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
這篇文章主要介紹了vue3組合式API實現(xiàn)todo列表,下面用組合式?API的寫法,實現(xiàn)一個可新增、刪除的todo列表效果,需要的朋友可以參考下2024-08-08
Vue.js實現(xiàn)"一個文件對應(yīng)一個組件"，無需webpack等工具，按需加載組件,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-10-10
這篇文章主要介紹了Vue3項目中引用TS語法的實例講解，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
組件是有name屬性的,匹配的就是組件的name,下面這篇文章主要給大家介紹了關(guān)于vue中組件的name屬性含義和用法的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-12-12
在我們?nèi)粘ｍ椖块_發(fā)中,經(jīng)常會有表格跨頁多選的需求,接下來讓我們用?el-table示例一步步來實現(xiàn)這個需求,文中有詳細的代碼講解,對我們的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2023-08-08