从零开始在NPM上发布一个Vue组件的方法步骤
吴子寒 人气:0TL;DR 本文细致讲解了在NPM上发布一个Vue组件的全过程，包括创建项目、编写组件、打包和发布四个环节。
创建项目
这里我们直接利用@vue/cli来生成项目。如果没有安装@vue/cli的话，可以使用以下方法进行安装：
# 如果喜欢npm npm i -g @vue/cli # 如果喜欢yarn yarn global add @vue/cli
此外，如果安装了npx（高版本的nodejs发行版会自带这一工具）的话，还可以很方便地通过npx vue这一方式实现免安装使用。
接下来就可以创建项目了，这里我们创建一个my-banner项目，里面将会包含一个Banner组件：
vue create my-banner
@vue/cli会提示你选择一个预置（preset）的配置，这里我们直接选择“default”（babel, eslint）就可以，之后@vue/cli会自动调用yarn或npm来进行依赖的下载。下载完成后就可以进入项目目录了：
cd my-banner
此时的目录结构为：
├── README.md ├── babel.config.js ├── node_modules ├── package.json ├── public │ ├── favicon.ico │ └── index.html ├── src │ ├── App.vue │ ├── assets │ ├── components │ └── main.js └── yarn.lock
下面启动开发环境本地服务器：
yarn serve
打开localhost:8080，就可以看到默认的首页：
@vue/cli 3.0自动生成的默认首页
编写组件
我们现在开始编写一个非常简单的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 href="https://cli.vuejs.org" rel="external nofollow" target="_blank" rel="noopener">vue-cli documentation</a>.
</p>
<!-- 省略部分内容 -->
</div>
</template>
<script>
<!-- 省略有关内容 -->
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
<!-- 省略有关内容 -->
</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，所以还需要安装两个开发环境依赖项
yarn add sass-loader node-sass -D
最后执行
yarn serve
就可以在localhost:8080看到效果了：
添加Banner后的页面效果
可以看到，我们编写的Banner组件已经成功在页面上渲染出来了。
打包
接下来，我们需要对这个组件进行打包。这里我们可以使用@vue/cli 3.0自带的打包功能。打开package.json文件，在scripts中增加一项：
{
"scripts": {
"package": "vue-cli-service build --target lib --name my-banner ./src/components/index.js"
}
}
然后执行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应该也是没问题的）：
{
"main": ".https://img.qb5200.com/download-x/dist/my-banner.common.js"
}
然后，我们需要在package.json的files字段中声明这个组件库项目需要包含的文件：
{
"files": [
"dist/*",
"src/*",
"public/*",
"*.json",
"*.js"
]
}
这样就可以打包阶段就算是完成了。
发布
注册NPM账号并创建组织
首先登陆NPM官网
npmjs.com
注册账号，都是常规操作，需要填写的有全名、邮箱、用户名和密码。之后邮箱会收到确认邮件，标题为“Verify your npm email address”，发件人是“npm, Inc.”，点击邮件中的链接就可以激活账户了。
登录账号，点击右上角的头像，选择“Create an Organization”，就可以创建你自己的组织了。
创建组织
组织有两种选项，支持私有发布的需要缴纳每月7刀的“管理费”，而我们现在只需要发布一个公共的包，那就可以选择免费版本。
选择公开组织
本地命令行登陆npm
npm login
之后按提示输入用户名和密码即可。
可以使用
npm whoami
来检查登陆是否成功。如果成功的话，这条命令会返回你的用户名。
给你的组件库命名
你需要给你的这个组件库起一个名字，这里用到的是package.json中的name字段。注意@后的名称就填写你刚刚创建的组织的名称。
{
"name": "@abc/my-banner"
}
最终步骤：再次构建与发布
最后，使用yarn package重新构建一遍这个组件库，然后使用：
npm publish --access public
来发布这个组件库。
注意这里可能会报下面的错误
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字段，或将其设置为false都可以。
成果
顺利发布后，就可以在你的组织页面看到刚刚发布的这个包了。
发布成功
在此之后，你可以新建一个项目，然后
yarn add @abc/my-banner
来把你刚刚发布的这个包添加为依赖项。由于我们之前已经在src/components/index.js中对组件进行了全局注册，所以你现在可以直接在template中调用<Banner>。
总结
以上，我们就从零开始实现了一个Vue组件在npm上发布的流程，是不是很简单呢？那么，现在就开始发布一个你自己的组件吧！希望对大家的学习有所帮助，也希望大家多多支持
参考文章
How to create and publish your own VueJS Component library on NPM using @vue/cli 3.0
加载全部内容