使用NPM发布uni-app,Vue自定义组件

柔情只为你懂 2021-09-30 04:42 710阅读 0赞

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

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

## 编写组件 ##

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

## 注册NPM账号 ##

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

## npm init ##

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

## npm login ##

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

## npm publish ##

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

## npm install 试试发布的组件 ##

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

## 写在后面的话 ##

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

1.  注册npm账号最好绑定QQ邮箱，我之前使用foxmail和新浪邮箱都没有绑定成功，直到换了QQ邮箱
2.  如果不是通过ｎｐｍ构建的项目是没有ｐａｃｋａｇｅ．ｊｓｏｎ文件的，因此需要通过ｎｐｍ　ｉｎｉｔ　创建
3.  使用ｎｐｍ　ｌｏｇｉｎ　时输入密码时没有任何提示的，但这不是错误，正常输入密码敲回车即可
4.  组件重名则无法发布需要更改自己的组件名。  
    ——————————————————ｔｈｅ　　ｅｎｄ　——————————————————————————

[NPM]: https://www.npmjs.com/
[package.json]: /images/20210726/73a041b06b4d42fc867fe21ace4299bb.png
[package.json 1]: /images/20210726/66205e1b5c064f3186ff89be6e98fd73.png
[npm login]: /images/20210726/ad7861a83efb4184b9ab417fd4614c60.png
[npm publish]: /images/20210726/a39a474f620842c680c3cf4329611057.png
[npm]: /images/20210726/74f9e25df0e34537b62e82b2ecf23524.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY3MDk3Mw_size_16_color_FFFFFF_t_70]: /images/20210726/fd1e0f85d9fe4665b7e30577f05e4156.png