在项目中有些组件在各个项目中都会调用,那么将组件发布到npm ,用到的项目去下载,这样会省去一些不必要的麻烦。

将组件发布到npm 中的步骤 做个记录

1.项目的创建,我这里使用 vue init webpack-simple 项目名

2修改文件目录 , 创建 components 文件夹 创建 main.vue  在根目录创建 index,js

3.修改文件内容 和配置

main.vue是一个组件  就按照组件的格式去写

index.js  的内容

注意引用的组件中一定要写name 属性

在组件中 最好使用../../ 这种方式去引用其他文件

4.修改 package.json

private 这个字段设置为false 这样才能发包的时候成功

main  是指定执行的目录文件  也就是build 后生成的文件目录

5 ,修改webpack.config.js 文件

这样生成的文件 就能发布到 npm

6 发布npm

1.去 npm 官网注册个账号 https://www.npmjs.com/

2.我使用的 yarn  后面的的命令使用 yarn    在项目的根目录中  yarn login 会让那你输入 npm 注册的用户名 邮箱 和密码

登录后显示

3登录成功后 可以发布  yarn publish  中间会让你输入密码 然后就发布成功了,

4.成功后就会在 npm 网站上看到你刚上传的项目

5.发布之前 会在 npm 有个邮箱验证 验证后就可以发布了

6.如果开启了双重验证的话 ,需要在发布的时候 命令行 添加验证的密令

7.要使用您的npm帐户启用2FA,您将需要一个可以生成一次性验证码OTP的应用程序。Authy或 Google Authenticator可以生成一次性验证码(OTP)。将应用程序安装在手机上。我使用的是 authenticator

8.在发布的时候添加上 后面的参数,要记得修改自己发布的版本号

将自己的组件打包发布到npm的更多相关文章

  1. 开发自己的react-native组件并发布到npm[转]

    原文链接:https://www.jianshu.com/p/091a68ea1ca7 写在前面 在做react-native开发的时候,我们经常会找到一些第三方组件,并且通过npm install的 ...

  2. 如何创建一个前端 React 组件并发布到 NPM

    首先npm文档摆在这里: https://www.npmjs.cn/ 参考组件 https://github.com/rakuten-rex/rex-dropdownhttps://www.npmjs ...

  3. 创建自己的library类库包并使用webpack4.x打包发布到npm

    创建自己的library类库包并使用webpack4.x打包发布到npm 我们在开发过程中,可能经常要使用第三方类库,比如jquery.lodash等.我们通过npm,下载安装完之后,就可以使用了,简 ...

  4. 跟我一起写一个hello-world react组件并发布到npm

    第一步:初始化我们的配置 $ mkdir react-hello-world $ cd react-hello-world/ $ npm init -y 修改我们的package.json文件 //p ...

  5. 将 Vue 组件库发布到 npm

    制作了一套自己的组件库,并发布到npm上,项目代码见 GitHub . 前期准备 有一个npm账号 安装了vue-cli 搭建项目 vue init webpack hg-vcomponents cd ...

  6. vue cli4构建基于typescript的vue组件并发布到npm

    基于vue cli创建一个vue项目 首先安装最新的vue cli脚手架, npm install --global @vue/cli npm WARN optional SKIPPING OPTIO ...

  7. 基于Vue3实现一个前端埋点上报插件并打包发布到npm

    前端埋点对于那些营销活动的项目是必须的,它可以反应出用户的喜好与习惯,从而让项目的运营者们能够调整策略优化流程提高用户体验从而获取更多的$.这篇文章将实现一个Vue3版本的埋点上报插件,主要功能有 通 ...

  8. 打包发布到NPM并通过CDN访问

    本文主要讲述基于webpack编写js包文件后上传到npm,并通过cdn进行访问. 创建项目 在自己新建的文件夹下执行如下代码: npm init name: (mtmap) version: (1. ...

  9. 魔改了一下bootstrap-treeview组件,发布个NPM包体验一下

    前言 之前在这篇文章 基于.NetCore开发博客项目 StarBlog - (8) 分类层级结构展示 中说到,我为了让文章分类列表支持层级结构,用了一个树形组件,不过这个组件太老了,使用的Boots ...

随机推荐

  1. React报错之Invalid hook call

    正文从这开始~ 总览 导致"Invalid hook call. Hooks can only be called inside the body of a function compone ...

  2. CF1167F Scalar Queries (线段树/树状数组)

    题意 题解 对于[l,r]中的一个数,不论[l,r]有多大,只有比它小的数可以影响到它的排名,那么就可以把ai从小到大排序,一个一个加入线段树中,线段树中下表为 i 的是ai(原来的位置,不是排序后的 ...

  3. 动态规划——leetcode55、跳跃游戏

    1.题目描述:  2.解题方法:动态规划 动态规划解题步骤: 1.确定状态: 最后一步:如果能跳到最后一个下标,我们考虑他的最后一步到n-1(最后一个下标),这一步是从 i 跳过来的,i<n-1 ...

  4. luogu P2882 [USACO07MAR]Face The Right Way G

    题目描述 Farmer John has arranged his N (1 ≤ N ≤ 5,000) cows in a row and many of them are facing forwar ...

  5. 自定义View4-塔防小游戏第一篇:一个防御塔+多个野怪(简易版)*

    塔防小游戏 第一篇:一个防御塔+多个野怪(简易版)    1.canvas画防御塔,妖怪大道,妖怪行走路线    2.防御塔攻击范围是按照妖怪与防御塔中心距离计算的,大于防御塔半径则不攻击,小于则攻击 ...

  6. 最新一线大厂Redis使用21条军规及详细解读

    说明:个人原创,本人在一线互联网大厂维护着几千套集群,关于redis使用的一些坑进行了经验总结,希望能给大家带来一些帮助 适用场景:并发量大.访问量大的业务 规范:介绍军规内容 解读:讲解军规设置原因 ...

  7. keycloak~资源的远程授权

    17.1远程资源授权准备 17.1.1认证和访问流程图 参考:http://www.zyiz.net/tech/detail-141309.html 17.1.2为用户指定角色 可以使用ROLE_US ...

  8. scheduler打印状态到日志

    编辑脚本和目录 # 如下步骤每个proxysql节点都需要操作 [root@ss30 opt]# mkdir -p /opt/proxysql/log [root@ss30 opt]# vim /op ...

  9. 在云原生中监控JVM指标

    一般 Java 集成 Prometheus 监控指标有两种方式.一种是依赖中引入,另外一种是通过agent执行. 依赖引入 <!-- The client --> <dependen ...

  10. WPF开发经验-实现自带触控键盘的TextBox

    一 引入 项目有个新需求,当点击或触碰TextBox时,基于TextBox的相对位置,弹出一个自定义的Keyboard,如下图所示: 二 KeyboardControl 先实现一个自定义的Keyboa ...