当前位置: 首页>后端>正文

uniapp 引入node_modules下模块 uniapp npm install

使用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文件。根据实际情况输入相关信息即可。当然也可以一路回车然后自己进到文件里面修改

uniapp 引入node_modules下模块 uniapp npm install,uniapp 引入node_modules下模块 uniapp npm install_NPM,第1张

uniapp 引入node_modules下模块 uniapp npm install,uniapp 引入node_modules下模块 uniapp npm install_自定义组件_02,第2张

npm login

配置好package.json文件之后就可以通过npm发布了。这时候在此使用命令行窗口打开文件所在目录执行npm login 指令

,可能会比较慢,需要耐心等待。输入Username : Password: Email等

uniapp 引入node_modules下模块 uniapp npm install,uniapp 引入node_modules下模块 uniapp npm install_NPM_03,第3张

该信息就是我们注册NPM账号时的信息,需要注意在输入密码的时候,光标不会移动,输入的字符也不会显示。单这时正常的,正确输入你设置的密码按回车就好出现Logged … 则说明登录成功

npm publish

登录成功之后 继续执行npm publish指令,即可完成自定义组件的发布,如果发布的组件和他人已经发布的组件同名会导致发布失败,需要我们更改组件名,然后再次发布。

uniapp 引入node_modules下模块 uniapp npm install,uniapp 引入node_modules下模块 uniapp npm install_uni-app 组件npm发布_04,第4张

该组件我之前已经发布过故现在发布不成功,发布成功后可以上到NPM账号里面发现,已经有一个包发布成功了。

uniapp 引入node_modules下模块 uniapp npm install,uniapp 引入node_modules下模块 uniapp npm install_uni-app 组件npm发布_05,第5张

npm install 试试发布的组件

组件发布之后可能需要过段时间才能通过 npm install 安装。使用命令窗口打开文件目录然后运行npm install gmy-fuzzy-search

安装结束后发现文件目录下多了一个node_modules文件夹,点开里面就是我刚才发布的自定义组件内容

uniapp 引入node_modules下模块 uniapp npm install,uniapp 引入node_modules下模块 uniapp npm install_NPM_06,第6张

写在后面的话

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

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



https://www.xamrdz.com/backend/3qj1962936.html

相关文章: