写了代码如何发布到npm包? 示例 demo1 demo2 1.注册npm账号 在npm官网注册https://www.npmjs.com/注意邮箱要验证,会发送验证链接到你的注册邮箱,没有验证的话是不能发布代码的 2.给你的代码库起个名字 名字不能重复,在官网查询下是不是重复,重复的包名不能提交 3.创建项目 需要一个package.json文件,这个文件不仅仅是用来标明依赖和npm script脚本,也可以是一个npm包被外界识别的配置文件.因为配置文件内容比较多,可以选择自己手写,或者 n

创建 vue 组件 1.创建vue项目,为了简洁方便,推荐使用webpack-simple构建一个项目 vue init webpack-simple your-project 2.在 src 目录下新建子目录lib,用来放后面自己写的所有组件 3.编写自己的组件 首先新建一个vue文件和一个index.js vue用于编写组件的模版和逻辑,像平时封装插件一样 ps:需要给组件命名 name: xxx,用于后面的导出 具体如下: index.js 作用是将该组件作为 Vue 插件,注册到 Vue

我们已经实现了路由的自动化构建,但是我们可以看到,一大串代码怼在里面.当然你也可以说,把它封装在一个JS文件里面,然后使用require('./autoRoute.js')给引入进来,那也行.但是,为什么不把心放大一点呢?比如说,我们把它做成一个npm包!   最初自己做的时候就是这种直接引入封装的JS文件里,可以参考:https://github.com/saucxs/watermark   一.准备工作 1.将npm包的镜像换成  https://www.npmjs.com/ npm con

我们已经实现了路由的自动化构建,但是我们可以看到,一大串代码怼在里面.当然你也可以说,把它封装在一个JS文件里面,然后使用require('./autoRoute.js')给引入进来,那也行.但是,为什么不把心放大一点呢?比如说,我们把它做成一个npm包!   最初自己做的时候就是这种直接引入封装的JS文件里,可以参考:https://github.com/saucxs/watermark   一.准备工作 1.将npm包的镜像换成  https://www.npmjs.com/ npm con

一.npm 发布到远程资源库 1.创建package.json Package.json 属性说明 name - 包名. version - 包的版本号. description - 包的描述. homepage - 包的官网 url . author - 包的作者姓名. contributors - 包的其他贡献者姓名. dependencies - 依赖包列表.如果依赖包没有安装,npm 会自动将依赖包安装在 node_module 目录下. repository - 包代码存放的地方的类型

有必要说说我为什么要开始写这个,正文从下面的第一条开始 我最近忙于公司的项目,一直没有抽出时间来写文章.本来想每个月写一片文章,保质保量,无奈上个月没有坚持. 这段时间有点忙,主要是由于公司业务调整,我从原来的广告项目中调整到新业务线的前台页面开发了,和以前一样,还是带着3.4个兄弟姐妹.不同的是以前的项目周期普遍偏长,可以让每个同学有时间从头到尾的把项目吃透,而现在做C端的前台页面往往开发时间非常的短,比如我们就要在1.2个月完成业务线所有前台页面的开发.联调.测试.部署,以及下一步的迭代.由

前言  怎么使用npm发布自己的组件包呢?博主看了不少相关的文章,都没有一个好的讲述.要么丢三落四,要么就是复杂到外行人根本看不懂,甚至无从下手.于是,在博主的潜心钻研下,终于成功了!所以,我打算写一篇更为实用的.简洁但详细的.面向小白的教程供大家参考! 前提准备 要求会安装软件: 要求能配置环境变量: 要求会使用CMD: 要求会打开网页注册账号. (只要你会以上技能,这里都可以看懂) 步骤简介 [安装NodeJS] [下载安装包] [安装软件] [测试] [配置环境] [配置环境变量] [安装

提到封装组件,发布到npm,很多同学都会觉得很神秘.但其实,npm包无非就是我们平时写的比较独立且可复用的模块.当然,想要发布,除了基础组件的编写外,还要进行一些包装.下文通过一个简单的案例,和大家一起讨论组件从开发到发布的整个过程.在此承诺,包教包会! 一.封装组件 封装组件包共有3个步骤: 创建组件模板 自定义组件内容 安装依赖,打包组件 1.创建组件模板 命令:vue init webpack-simple proName,这里我定义项目名叫“hello-world”. 由于是simple

使用npm发布插件 博客说明 文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人删除,谢谢! 简介 npm是一个全球性的包管理工具,上面有着许许多多的前端插件,当然我们也可以发布 官方地址 https://www.npmjs.com/ 注册 首先我们需要在npm平台上面有一个自己的账号 验证用户 打开我们的终端,在终端里面执行验证命令 npm addUser //登录用户 按照他所提示的步骤来,一步一步来验证 查看当前用户 npm whoami //

初始化项目vue init webpack-simple XXX 定义组件略 发布配置1.package.json 2.webpack.config.js(注释部分为原配置) 发布1.登录 2.发布npm publish

Vue 开发插件 我们可以先查看Vue的插件的开发规范 我们开发的之后期望的结果是支持 import.require 或者直接使用 script 标签的形式引入,就像这样: ps: 这里注意一下包的名字前缀是 unisoft ,组件的名字前缀是 uni import UniSoftUI from 'unisoft-ui'; // 或者 const CustomUI = require('unisoft-ui'); // 或者 <script src="..."></s

咱们闲话不多说,直接开始! 由于我从没有使用过MAC,所以我不保证本文中介绍的操作与MAC一致. 文章开始我先假定各位已经在window全局安装了Node.js,下面开始进行详细步骤介绍: 本文本着,以极少的文字说明以及极少的代码书写为原则来给大家演示! 文章中上传的模块不具备任何意义! 一.封装node.js模块时的必需项 1.创建package.json 每一个完整封装的node模块,必须含有一个参数明确的package.json文件! 以下为package.json的最精简配置: { "n

Vue 开发插件 开发之前先看看官网的 开发规范 我们开发的之后期望的结果是支持 import.require 或者直接使用 script 标签的形式引入,就像这样: // 这里注意一下包的名字前缀是 custom ,组件的名字前缀是 moor // 这是因为那个名字发布包的时候被占用了(我做实验的时候叫 moor-ui)现在改成了custom-ui,但是组件的前缀懒得改 import CustomUI from 'custom-ui'; // 或者 const CustomUI = requi

vue: V2.5.11 此篇尽量详细,清楚的讲解vue插件的开发到npm的发布,想想将你自己做的东西展示给广大"网民",心里还是有点小激动的...-^_^ 先上一下插件效果图------github传送门 下面我们就来说说详细做法: 1. 初始化项目 vue init webpack-simple vue-pay-keyboard 使用vue创建一个简单的项目,删除src中除了main.js和app.vue外的文件,清空app.vue中无用内容 整理完后项目目录 2.编写插件 vue

我们在前端工程开发中通常使用npm这个包管理器来安装各种好用的轮子(当然也有用yarn的),不安分的码工就想,也发布一个试试,哪怕只是一个小时候滚的铁环而不是轮子. 首先,要在 npmjs官网注册自己的账户 编写自己的铁环或轮子工程 创建工程文件夹,npm init git init 编写内容 登录,发布 npm login 这时候命令行会提示输入用户名,(输入注册时的用户名,回车),然后提示输入密码(输入注册时的密码,回车) 不出意外的话就显示`logged in 用户名`之类的信息了 npm

组件订阅与发布(PubSubJS库) npm info pubsub-js 安装库 npm install --save pubsub -js =============================================================== 1.订阅消息 PubSub.subscribe('msg',function(msg,data){}) 2.发布消息 PubSub.publish('msg',data) 3.注意 1).优点:此方式可实现任意关系组件间通信(数

1.执行npm i 安装依赖时,报错:cannot read property 'match' of undefined 据说是npm本地缓存导致 解决方案: rm -rf package-lock.json ( 甚至连同node_modules一起删掉   rm -rf package-lock.json node_modules) 但是执行完毕后,又出现了新问题:/bin/git submodule update -q --init --recursive 2.强制清除npm 缓存 npm

我们经常使用 npm i  -g  xxxx 安装完成一个包之后,就能直接使用对应的指令.例如安装  vue-cli 或者 express 等 那么下面我们自己做一个类似的效果: 首先要对 npm 发布包,有一定了解,不清楚的,可以先参考 我的另一篇博客https://www.cnblogs.com/muamaker/p/10435481.html 1.首先,我们在 package.json 里面加入 bin 指令:如图 2.在项目下面,新建一个文件 link -> link.js 3.在 li

开发好一个插件后,要想让其他人也能使用该插件需要将插件发布到npm上,具体步骤如下: 1.添加npm用户: npm adduser Username: your name Password: your password Email: yourmail 2.登陆npm npm login 这里会要求你输入用户名.密码.电子邮箱 3.验证邮箱 登陆npm后,如果是第一次发布,npm会发一个验证邮件到你的邮箱,只有验证以后下面的发布才不会出错. 4.发布 npm publish 发布完后可以到这里查看

记录一下大概步骤: 去npm官网注册一个账号 在文件夹下执行npm init 创建 package.json 执行 npm login,并根据提示输入你的npm账号,密码,和邮箱 执行 npm publish,发布你的包到npm官网上去 你可以到官网搜索你的包名,或者你在本地的其他项目中尝试安装一下,如果能成功,说明你发布成功了 或者你可以执行 npm search [你的包名],能查到,也说明你发布成功了 最后,请自备梯子.

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