欢迎光临万书涛的个人博客

HBuilderX如何使用npm安装包,如何打开终端

作者:万书涛  / 日期:2021-09-26 21:34:46 /  来源:本站原创 /   浏览:
摘要
一般我们安装php第三方包都是在windows命令控制台里进行操作,如果我们正在用HBuilderX进行开发工作,那么完全可以通过HBuilderX终端进行安装。  
首先,我们要使用npm安装包,那么要配置好npm环境,现在npm集成到了nodejs里,我们只需要从“nodejs中文网”下载对应的安装包,一路下一步安装即可,安装完路径如下图:
可以看到,里面已经包含了npm.cmd,详细的安装过程这里就不说了,比较简单。
 
HBuilderX通过npm安装包步骤图一
 
安装完后,需要在HBuilderX里配置一下,打开HbuilderX下的“工具-配置”,然后找到运行配置,勾选内置终端,然后分别填好npm路径和node路径,配置如下图所示。

HBuilderX通过npm安装包步骤图二

配置好后,我们就可以打开HBuilderX终端了,要打开终端,可以用快捷键,快捷键是Alt+c,如下图箭头2所示,已经出现终端字样了,然后就可以通过npm来安装包了。
 
要使用npm安装包,需要注意以下步骤
 
第一、要使用npm安装包,首先需要选择我们项目中的一个文件,比如下图这个项目,选择wstblog-1.0下的page.json打开,然后再按住Alt+c快捷键,这样终端就会以我们目前的项目目录为基点进行定位安装,如下图箭头3所示,终端路径是“F:\xiaochengxu\wstblog-1.0>”,这样包就会安装到这个目录下,如果不这样操作,那么就会安装到C盘的默认目录。

HBuilderX通过npm安装包步骤图三

第二、开始安装
我们以uniapp项目为例,要开始安装,首先需要初始化,让项目生成package.json文件,执行 npm  init  -y命令,然后回车,会生成一个package.json文件,这个文件就记录了我们当前安装包的信息,这样后期包变动了也不怕,只要通过npm  i就可以恢复包,很方便。

HBuilderX通过npm安装包步骤图四

下面以一个vuex包安装为例来说,我们初始化完毕后,只需要在uni-app终端执行npm  i  vuex,回车后等待安装完成,安装完成后,再打开package.json,会发现生成的vuex信息,如下图箭头1所示,而且包被安装到了项目中的一个node_modules目录中,后期我们的包通过这样安装方式都会安装到这个文件夹,方便查看和管理。

HBuilderX通过npm安装包步骤图五

这样,我们的包就通过npm安装完毕了,以后的第三方包都可以用这种方式来进行安装。
 
所属分类: 暂无分类
微信二维码

扫描关注微信公众号
第一时间获取最新资讯
本文由万书涛原创,地址:https://www.wtaoblog.com/wxxcx/266.html
如需转载,须以文字形式注明本文地址,否则禁止转载

猜你喜欢

无相关信息