使用NPM发布uni-app以及vue自定义组件

使用npm install 安装他人发布的组件平时用的比较多,操作也比较简单。最近自己捣鼓了一下,如何发布自己的自定义组件方便自己和他人使用npm install 安装。

编写组件

第一步是本地编写自己的自定义组件,编译通过并确保组件能正常运行的情况下就可以通过npm publish 发布了。不过发布之前还需要一些准备工作。

注册NPM账号

首先需要注册npm账号并绑定邮箱,最好绑定QQ邮箱,其他邮箱验证的时候容易出现错误。npm注册链接NPM注册

npm init

注册完成之后,配置好package.json文件就可以通过npm发布了。不过如果是自己通过HBuiderX开发工具新建的项目是没有package.json文件的。因此需要使用命令行工具打开文件所在的目录并执行npm init 命令,该指令会在当前目录下创建package.json文件。根据实际情况输入相关信息即可。当然也可以一路回车然后自己进到文件里面修改
package.json
package.json内容

npm login

配置好package.json文件之后就可以通过npm发布了。这时候在此使用命令行窗口打开文件所在目录执行npm login 指令
,可能会比较慢,需要耐心等待。输入Username : Password: Email等
npm login
该信息就是我们注册NPM账号时的信息,需要注意在输入密码的时候,光标不会移动,输入的字符也不会显示。单这时正常的,正确输入你设置的密码按回车就好出现Logged … 则说明登录成功

npm publish

登录成功之后 继续执行npm publish指令,即可完成自定义组件的发布,如果发布的组件和他人已经发布的组件同名会导致发布失败,需要我们更改组件名,然后再次发布。
npm publish该组件我之前已经发布过故现在发布不成功,发布成功后可以上到NPM账号里面发现,已经有一个包发布成功了。
我发布的npm组件

npm install 试试发布的组件

组件发布之后可能需要过段时间才能通过 npm install 安装。使用命令窗口打开文件目录然后运行npm install gmy-fuzzy-search
安装结束后发现文件目录下多了一个node_modules文件夹,点开里面就是我刚才发布的自定义组件内容
安装结果

写在后面的话

到这里npm发布自定义组件就已经完成了,有几个地方需要注意

  1. 注册npm账号最好绑定QQ邮箱,我之前使用foxmail和新浪邮箱都没有绑定成功,直到换了QQ邮箱
  2. 如果不是通过npm构建的项目是没有package.json文件的,因此需要通过npm init 创建
  3. 使用npm login 时输入密码时没有任何提示的,但这不是错误,正常输入密码敲回车即可
  4. 组件重名则无法发布需要更改自己的组件名。
    ——————————————————the  end ——————————————————————————
Logo

前往低代码交流专区

更多推荐