将自己的组件打包发布到npm

在项目中有些组件在各个项目中都会调用,那么将组件发布到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.在发布的时候添加上 后面的参数,要记得修改自己发布的版本号

原文地址:https://www.cnblogs.com/buxiugangzi/p/12166111.html

时间: 2024-10-03 20:24:38

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

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

首先npm文档摆在这里: https://www.npmjs.cn/ 参考组件 https://github.com/rakuten-rex/rex-dropdownhttps://www.npmjs.com/package/react-slot “造轮子”是非常有效的学习方法.在熟练掌握API的搬运方法之后,我们可以通过自己“造轮子”来进一步掌握和理解更底层的知识.自己完成一个组件的开发之后,我们可以打包上传到 NPM 来分享自己的成果.在后面的步骤中,将会实现以下几个小目标: 配置开发环境

vue封装组件,类似elementUI组件库打包发布到npm上

封装vue组件库的两种方法和形式: 一:是建立一个webpack-simple 项目 二:是在通过vue-cli脚手架建立webpack vue项目,这种项目有点冗余,可是我们对这种项目最熟悉 下面分别介绍两种用法: 一: 1.首先先建立一个vue项目: 通过vue init webpack-simple,新建项目目录如下: 箭头指的是在项目打包后产生的文件(打包命令npm run build ) 2.在src下新建一个目录用来存放组件源码: 然后写封装的组件,比如radios/radio.vu

vue组件篇(2)---封装组件并发布到npm

瞎说说 vue小白,要进行应用开发:你们都用什么UI框架,求指教,不想踩坑(想太多,不踩坑???不存在的!!!too young too simple-) 同学1:pc端我用element UI,感觉组件的API方法.属性比较完善...?? 同学2:哈?我个人感觉他的样式有些生硬,不够炫酷美观??,用iView吧,组件丰富,动画效果cool~~~?? 同学3:真的吗?阔是有人说,iView组件虽然完美的把其他UI组件有的缺点完美避过,但是某某组件不够人性化....?? 同学4:用vue-beau

将 Vue 组件库发布到 npm

制作了一套自己的组件库,并发布到npm上,项目代码见 GitHub . 前期准备 有一个npm账号 安装了vue-cli 搭建项目 vue init webpack hg-vcomponents cd hg-vcomponents cnpm install 目录结构 - vue-flag-list + build + dist // 存放发布到npm的代码 - src - components // 存放组件源代码 和 README.md - arrows arrows.vue README.m

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

我们在开发过程中,可能经常要使用第三方类库,比如jquery.lodash等.我们通过npm,下载安装完之后,就可以使用了,简单方便.我们自己可以创建一个类库,然后供其他人这样安装使用吗?当然是可以的. 下面我们就来说说. 1. 创建自己的类库 index.js import numRef from './ref.json' const numberWord = () => { const numToWord = (num) => { let returnValue = _.reduce(nu

【转】从零开始开发一个vue组件打包并发布到npm (把vue组件打包成一个可以直接引用的js文件)

自己写的组件 有的也挺好的,为了方便以后用自己再用或者给别人用,把组件打包发布到npm是最好不过了,本次打包支持 支持正常的组件调用方式,也支持Vue.use, 也可以直接引用打包好的js文件, 配合vue.js 就不需要webpakc这种构建工具了,可以直接在页面内使用,下面以 ‘yyl-npm-practice’ 这个包为例 第一步:使用 vue init webpack-simple yyl-npm-practice   初始化项目 提示: 不要用 vue init webpack npm

vue插件开发流程详解-从开发到发布至npm(一)

vue的插件开发 1.本地开发 1.1 初始化本地开发项目 我们采用vue-cli,初始化一个vue 项目.这个不做详解,请移步到 这里,查看具体详细.初始化后就是这样的项目结构: 其他的文件目录不是本节内容重点,不做详解,请移步这里查看. 1.2 test.js 的内容 ,这是插件的入口文件 关于为什么需要在install这个方法这里添加我们的方法,可以参考官网.https://cn.vuejs.org/v2/guide/plugins.html  这里只是用了其中的一部分的内容. test.

vue封装插件并发布到npm上

vue封装插件并发布到npm上 项目初始化 首先,要创建项目,封装vue的插件用webpack-simple很合适,vue init webpack-simple 项目名称此命令创建我们的项目的目录,创建文件夹和文件,最后结构是这样的  然后根据需求,实现具体功能,这里我封装了一个轮播图组件mini-sliders,主要功能写在lib/slider.vue组件中 功能写好后,我们要写index.js来封装组件 import VueComment from './VueComment.vue' c

react组件化开发发布到npm

1.项目目录 build:webpack打包用(开发环境.发布环境) example:开发环境的模板页 lib:打包好的文件夹(用于发布到npm上) src:想要封装的公共组件 .babelrc:处理es6语法 package.json:打包的依赖文件,管理项目模块包 开发环境配置(webpack.dev.config.js) const path = require('path') const htmlWebpackPlugin = require('html-webpack-plugin')