从零开始在NPM上发布一个Vue组件的方法步骤


Posted in Javascript onDecember 20, 2018

TL;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,就可以看到默认的首页:

从零开始在NPM上发布一个Vue组件的方法步骤

@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看到效果了:

从零开始在NPM上发布一个Vue组件的方法步骤

添加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": "./dist/my-banner.common.js"
}

然后,我们需要在package.json的files字段中声明这个组件库项目需要包含的文件:

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

这样就可以打包阶段就算是完成了。

发布

注册NPM账号并创建组织

首先登陆NPM官网

 从零开始在NPM上发布一个Vue组件的方法步骤

 npmjs.com

注册账号,都是常规操作,需要填写的有全名、邮箱、用户名和密码。之后邮箱会收到确认邮件,标题为“Verify your npm email address”,发件人是“npm, Inc.”,点击邮件中的链接就可以激活账户了。

登录账号,点击右上角的头像,选择“Create an Organization”,就可以创建你自己的组织了。

从零开始在NPM上发布一个Vue组件的方法步骤

创建组织

组织有两种选项,支持私有发布的需要缴纳每月7刀的“管理费”,而我们现在只需要发布一个公共的包,那就可以选择免费版本。

 从零开始在NPM上发布一个Vue组件的方法步骤

选择公开组织

本地命令行登陆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都可以。

成果

顺利发布后,就可以在你的组织页面看到刚刚发布的这个包了。

 从零开始在NPM上发布一个Vue组件的方法步骤

发布成功

在此之后,你可以新建一个项目,然后

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

Javascript 相关文章推荐
jquery获取tagName再进行判断
May 29 Javascript
一个获取第n个元素节点的js函数
Sep 02 Javascript
JavaScript实现随机替换图片的方法
Apr 16 Javascript
浅析script标签中的defer与async属性
Nov 30 Javascript
微信小程序开发之大转盘 仿天猫超市抽奖实例
Dec 08 Javascript
JavaScript表单验证的两种实现方法
Feb 11 Javascript
vue.js实现价格格式化的方法
May 23 Javascript
jQuery Ajax 实现分页 kkpager插件实例代码
Aug 10 jQuery
VUE-cli3使用 svg-sprite-loader
Oct 20 Javascript
vue 左滑删除功能的示例代码
Jan 28 Javascript
node中IO以及定时器优先级详解
May 10 Javascript
vue单应用在ios系统中实现微信分享功能操作
Sep 07 Javascript
微信小程序实现swiper切换卡内嵌滚动条不显示的方法示例
Dec 20 #Javascript
微信小程序实现的点击按钮 弹出底部上拉菜单功能示例
Dec 20 #Javascript
vue+Vue Router多级侧导航切换路由(页面)的实现代码
Dec 20 #Javascript
微信小程序module.exports模块化操作实例浅析
Dec 20 #Javascript
JavaScript类的继承操作实例总结
Dec 20 #Javascript
vue返回上一页面时回到原先滚动的位置的方法
Dec 20 #Javascript
详解Vue.js自定义tipOnce指令用法实例
Dec 19 #Javascript
You might like
预告映像公开!第1章续篇剧场版动画《Princess Principal Crown Handler》4月10日上映!
2020/03/06 日漫
php自动获取关键字的方法
2015/01/06 PHP
WordPress开发中短代码的实现及相关函数使用技巧
2016/01/05 PHP
php ajax实现文件上传进度条
2016/03/29 PHP
php7安装yar扩展的方法详解
2017/08/03 PHP
PHP中__set()实例用法和基础讲解
2019/07/23 PHP
extjs render 用法介绍
2013/09/11 Javascript
js中的时间转换—毫秒转换成日期时间的示例代码
2014/01/26 Javascript
jquery日历控件实现方法分享
2014/03/07 Javascript
express的中间件bodyParser详解
2014/12/04 Javascript
JQuery勾选指定name的复选框集合并显示的方法
2015/05/18 Javascript
jquery实现的横向二级导航效果代码
2015/08/26 Javascript
JS实现带有3D立体感的银灰色竖排折叠菜单代码
2015/10/20 Javascript
Bootstrap+jfinal实现省市级联下拉菜单
2016/05/30 Javascript
完美解决jQuery符号$与其他javascript 库、框架冲突的问题
2016/08/09 Javascript
jQueryUI 拖放排序遇到滚动条时有可能无法执行排序的小bug及解决方案
2016/12/19 Javascript
Vue数组更新及过滤排序功能
2017/08/10 Javascript
vue实现提示保存后退出的方法
2018/03/15 Javascript
AngularJS使用Filter自定义过滤器控制ng-repeat去除重复功能示例
2018/04/21 Javascript
微信小程序在text文本实现多种字体样式
2019/11/08 Javascript
js实现QQ邮箱邮件拖拽删除功能
2020/08/27 Javascript
[04:16]DOTA2全国高校联赛16强抽签
2018/05/02 DOTA
Python Mysql自动备份脚本
2008/07/14 Python
python进阶教程之循环对象
2014/08/30 Python
在Django框架中编写Context处理器的方法
2015/07/20 Python
python anaconda 安装 环境变量 升级 以及特殊库安装的方法
2017/06/21 Python
python监控进程状态,记录重启时间及进程号的实例
2019/07/15 Python
Python 解决火狐浏览器不弹出下载框直接下载的问题
2020/03/09 Python
四方通行旅游网:台湾订房、出国旅游
2017/09/20 全球购物
警察先进个人事迹材料
2014/05/16 职场文书
公司应聘求职信
2014/06/21 职场文书
社区文艺活动方案
2014/08/19 职场文书
英文自荐信范文
2015/03/25 职场文书
2015年科室工作总结
2015/04/10 职场文书
安全知识竞赛主持词
2015/06/30 职场文书
十大最强水系宝可梦,最美宝可梦排第三,榜首大家最熟悉
2022/03/18 日漫