這篇文章將為大家詳細(xì)講解有關(guān)如何在NPM上發(fā)布一個(gè)Vue組件，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

為企業(yè)提供網(wǎng)站設(shè)計(jì)制作、成都網(wǎng)站建設(shè)、網(wǎng)站優(yōu)化、成都營銷網(wǎng)站建設(shè)、競價(jià)托管、品牌運(yùn)營等營銷獲客服務(wù)。創(chuàng)新互聯(lián)公司擁有網(wǎng)絡(luò)營銷運(yùn)營團(tuán)隊(duì)，以豐富的互聯(lián)網(wǎng)營銷經(jīng)驗(yàn)助力企業(yè)精準(zhǔn)獲客，真正落地解決中小企業(yè)營銷獲客難題，做到“讓獲客更簡單”。自創(chuàng)立至今，成功用技術(shù)實(shí)力解決了企業(yè)“網(wǎng)站建設(shè)、網(wǎng)絡(luò)品牌塑造、網(wǎng)絡(luò)營銷”三大難題，同時(shí)降低了營銷成本，提高了有效客戶轉(zhuǎn)化率，獲得了眾多企業(yè)客戶的高度認(rèn)可！

創(chuàng)建項(xiàng)目

這里我們直接利用@vue/cli來生成項(xiàng)目。如果沒有安裝@vue/cli的話，可以使用以下方法進(jìn)行安裝：

# 如果喜歡npm
npm i -g @vue/cli

# 如果喜歡yarn
yarn global add @vue/cli

此外，如果安裝了npx（高版本的nodejs發(fā)行版會(huì)自帶這一工具）的話，還可以很方便地通過npx vue這一方式實(shí)現(xiàn)免安裝使用。

接下來就可以創(chuàng)建項(xiàng)目了，這里我們創(chuàng)建一個(gè)my-banner項(xiàng)目，里面將會(huì)包含一個(gè)Banner組件：

vue create my-banner

@vue/cli會(huì)提示你選擇一個(gè)預(yù)置（preset）的配置，這里我們直接選擇“default”（babel, eslint）就可以，之后@vue/cli會(huì)自動(dòng)調(diào)用yarn或npm來進(jìn)行依賴的下載。下載完成后就可以進(jìn)入項(xiàng)目目錄了：

cd my-banner

此時(shí)的目錄結(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

下面啟動(dòng)開發(fā)環(huán)境本地服務(wù)器：

yarn serve

打開localhost:8080，就可以看到默認(rèn)的首頁：

@vue/cli 3.0自動(dòng)生成的默認(rèn)首頁

編寫組件

我們現(xiàn)在開始編寫一個(gè)非常簡單的Banner組件。

.banner {
 padding: 12px;
 background-color: #fcf6cd;
 color: #f6a623;
 text-align: left;
 position: fixed;
 z-index: 2;
}
.banner__top {
 top: 0;
}
.banner__bottom {
 bottom: 0;
}

我們將Banner.vue置于src/components目錄下，同時(shí)在該目錄下新建一個(gè)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自動(dòng)生成的src/components/HelloWorld.vue文件，引用一下我們剛剛編寫的Banner組件：

修改一下項(xiàng)目的主入口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');

因?yàn)榍懊娑xstyle時(shí)使用了scss，所以還需要安裝兩個(gè)開發(fā)環(huán)境依賴項(xiàng)

yarn add sass-loader node-sass -D

最后執(zhí)行

yarn serve

就可以在localhost:8080看到效果了：

添加Banner后的頁面效果

可以看到，我們編寫的Banner組件已經(jīng)成功在頁面上渲染出來了。

打包

接下來，我們需要對這個(gè)組件進(jìn)行打包。這里我們可以使用@vue/cli 3.0自帶的打包功能。打開package.json文件，在scripts中增加一項(xiàng)：

{
 "scripts": {
   "package": "vue-cli-service build --target lib --name my-banner ./src/components/index.js"
 }
}

然后執(zhí)行yarn package，會(huì)在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字段中聲明這個(gè)組件庫項(xiàng)目需要包含的文件：

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

這樣就可以打包階段就算是完成了。

發(fā)布

注冊NPM賬號并創(chuàng)建組織

首先登陸NPM官網(wǎng)

 

 npmjs.com

注冊賬號，都是常規(guī)操作，需要填寫的有全名、郵箱、用戶名和密碼。之后郵箱會(huì)收到確認(rèn)郵件，標(biāo)題為“Verify your npm email address”，發(fā)件人是“npm, Inc.”，點(diǎn)擊郵件中的鏈接就可以激活賬戶了。

登錄賬號，點(diǎn)擊右上角的頭像，選擇“Create an Organization”，就可以創(chuàng)建你自己的組織了。

創(chuàng)建組織

組織有兩種選項(xiàng)，支持私有發(fā)布的需要繳納每月7刀的“管理費(fèi)”，而我們現(xiàn)在只需要發(fā)布一個(gè)公共的包，那就可以選擇免費(fèi)版本。

 

選擇公開組織

本地命令行登陸npm

npm login

之后按提示輸入用戶名和密碼即可。

可以使用

npm whoami

來檢查登陸是否成功。如果成功的話，這條命令會(huì)返回你的用戶名。

給你的組件庫命名

你需要給你的這個(gè)組件庫起一個(gè)名字，這里用到的是package.json中的name字段。注意@后的名稱就填寫你剛剛創(chuàng)建的組織的名稱。

{
 "name": "@abc/my-banner"
}

最終步驟：再次構(gòu)建與發(fā)布

最后，使用yarn package重新構(gòu)建一遍這個(gè)組件庫，然后使用：

npm publish --access public

來發(fā)布這個(gè)組件庫。

注意這里可能會(huì)報(bào)下面的錯(cuò)誤

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ā)布的這個(gè)包了。

 

發(fā)布成功

在此之后，你可以新建一個(gè)項(xiàng)目，然后

yarn add @abc/my-banner

來把你剛剛發(fā)布的這個(gè)包添加為依賴項(xiàng)。由于我們之前已經(jīng)在src/components/index.js中對組件進(jìn)行了全局注冊，所以你現(xiàn)在可以直接在template中調(diào)用。

關(guān)于“如何在NPM上發(fā)布一個(gè)Vue組件”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯(cuò)，請把它分享出去讓更多的人看到。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

分享題目：如何在NPM上發(fā)布一個(gè)Vue組件-創(chuàng)新互聯(lián)
本文地址：http://weahome.cn/article/iipod.html