如何在NPM上發(fā)布一個(gè)Vue組件

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

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

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

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

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

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

接下來(lái)就可以創(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來(lái)進(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)的首頁(yè)：

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

編寫組件

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

<!-- src/components/Banner.vue -->

<template>
 <div class="banner" : :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目錄下，同時(shí)在該目錄下新建一個(gè)index.js文件，用來(lái)注冊(cè)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;

接下來(lái)我們修改一下@vue/cli自動(dòng)生成的src/components/HelloWorld.vue文件，引用一下我們剛剛編寫的Banner組件：

<!-- src/components/HelloWorld.vue -->

<template>
 <div class="hello">
  <!-- 下面插入了我們剛剛編寫的Banner組件 -->
  <Banner>This is a banner!</Banner>
  <h2>{{ msg }}</h2>
  <p>
   For a guide and recipes on how to configure / customize this project,<br>
   check out the
   <a href="https://cli.vuejs.org" 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>

修改一下項(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后的頁(yè)面效果

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

打包

接下來(lái)，我們需要對(duì)這個(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

接下來(lái)，需要將package.json中的main字段指向剛剛生成的庫(kù)文件。這里以commonjs為例（umd應(yīng)該也是沒(méi)問(wèn)題的）：

{
 "main": "./dist/my-banner.common.js"
}

然后，我們需要在package.json的files字段中聲明這個(gè)組件庫(kù)項(xiàng)目需要包含的文件：

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

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

發(fā)布

注冊(cè)NPM賬號(hào)并創(chuàng)建組織

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

 npmjs.com

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

登錄賬號(hào)，點(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

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

給你的組件庫(kù)命名

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

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

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

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

npm publish --access public

來(lái)發(fā)布這個(gè)組件庫(kù)。

注意這里可能會(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.

解決辦法很簡(jiǎn)單，按照提示刪除package.json中的private字段，或?qū)⑵湓O(shè)置為false都可以。

成果

順利發(fā)布后，就可以在你的組織頁(yè)面看到剛剛發(fā)布的這個(gè)包了。

發(fā)布成功

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

yarn add @abc/my-banner

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

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