快捷導(dǎo)航

從零開(kāi)始在NPM上發(fā)布一個(gè)Vue組件的方法步驟

更新時(shí)間：2018年12月20日 10:06:40 作者：吳子寒

這篇文章主要介紹了從零開(kāi)始在NPM上發(fā)布一個(gè)Vue組件的方法步驟，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

TL;DR 本文細(xì)致講解了在NPM上發(fā)布一個(gè)Vue組件的全過(guò)程，包括創(chuàng)建項(xiàng)目、編寫(xiě)組件、打包和發(fā)布四個(gè)環(huán)節(jié)。

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

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

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

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

此外，如果安裝了npx（高版本的nodejs發(fā)行版會(huì)自帶這一工具）的話(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)行依賴(lài)的下載。下載完成后就可以進(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)開(kāi)發(fā)環(huán)境本地服務(wù)器：

yarn serve

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

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

編寫(xiě)組件

我們現(xiàn)在開(kāi)始編寫(xiě)一個(gè)非常簡(jiǎ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目錄下，同時(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文件，引用一下我們剛剛編寫(xiě)的Banner組件：

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

<template>
 <div class="hello">
  <!-- 下面插入了我們剛剛編寫(xiě)的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>

修改一下項(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è)開(kāi)發(fā)環(huán)境依賴(lài)項(xiàng)

yarn add sass-loader node-sass -D

最后執(zhí)行

yarn serve

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

添加Banner后的頁(yè)面效果

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

打包

接下來(lái)，我們需要對(duì)這個(gè)組件進(jìn)行打包。這里我們可以使用@vue/cli 3.0自帶的打包功能。打開(kāi)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ī)操作，需要填寫(xiě)的有全名、郵箱、用戶(hù)名和密碼。之后郵箱會(huì)收到確認(rèn)郵件，標(biāo)題為“Verify your npm email address”，發(fā)件人是“npm, Inc.”，點(diǎn)擊郵件中的鏈接就可以激活賬戶(hù)了。

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