Npm环境安装、项目初始化以及插件安装

简介: npm环境搭建的话,需要安装Nodejs,可以打开百度首页输入nodejs进行搜索。

1

NPM环境安装

npm环境搭建的话,需要安装Nodejs,可以打开百度首页输入nodejs进行搜索:


微信图片_20220114174754.png



具体安装这里可以参考之前写的文章:

Node.js环境搭建以及常见npm用法

注意事项:

1、安装完之后,需要配置环境变量方可使用

2、配置环境变量后,要重新打开一个新的cmd窗口,输入node -v  以及 npm  -v 去验证下环境变量是否配置成功。(这里建议环境变量按照安装目录配置一个NODE_HOME,方便以后切换不同的版本)


微信图片_20220114174758.png


3、现在最新的版本比较高,但是不建议使用最新的版本,避免初学者在使用过程中遇到问题。


2

NPM的使用

1、项目初始化操作

在本地建一个空的文件夹,然后在当前路径下打开cmd窗口(在资源管理器中输入cmd即可):



微信图片_20220114174801.png


输入 npm init 即可初始化一个项目。输入命令后需要手动输入项目名、版本、描述信息、仓库地址等一系列的信息,部分可以直接敲回车跳过

觉得繁琐的话,可以直接输入npm init -y ,则会采用默认的值进行初始化操作。执行完命令后,会生成一个package.json的文件,里面会有上述手动操作时需要输入的各项信息:


微信图片_20220114174803.png


2、安装js插件

npm install 插件名@版本号

比如:npm install element-ui


微信图片_20220114174806.png


安装过程中打印的一些黄色警告信息可以忽略。

安装完成后,在文件夹中会多出一个node_modules文件夹以及一个package-lock.json的文件。

package-lock.json是在执行npm install 命令的时候生成的一个文件,文件中会记录项目的名称、版本号以及相关的依赖信息等:


微信图片_20220114174808.png


package-lock.json文件的内容,有点类似于java里面maven工程的pom文件,对应的node_modules文件夹就类似使用maven的编译命令下载下来的依赖jar包存放的目录。


3、插件版本不同格式说明

在使用npm install 安装插件后,在package.json文件中,也会记录插件的版本号,细心的朋友可能会发现,版本前面带了一个^符号。


符号
说明
^2.1.1 2表示大版本,后面的2.x.x表示次要版本号和小版本号是最新的。

~2.1.2
表示安装依赖的时候,安装的不一定是2.1.2的版本,而是2.1.x的最新版本。

latest
表示安装最新版本(不指定版本号安装时,默认是安装最新的版本)
npm install element-ui@latest

注意:指定版本安装时,对应的版本号必须存在喔,否则会报错。


相关文章
|
缓存 资源调度 持续交付
在清空NPM缓存后,检查是否所有依赖都已正确安装
在清空NPM缓存后,检查是否所有依赖都已正确安装
|
9月前
|
JavaScript
node环境之Error: Cannot find module ‘chalk’ 报错无法解决的问题—-网上说让你npm install chalk 基本是没有用的-优雅草央千澈解决方案
node环境之Error: Cannot find module ‘chalk’ 报错无法解决的问题—-网上说让你npm install chalk 基本是没有用的-优雅草央千澈解决方案
577 13
node环境之Error: Cannot find module ‘chalk’ 报错无法解决的问题—-网上说让你npm install chalk 基本是没有用的-优雅草央千澈解决方案
|
8月前
|
JavaScript
nodejs安装之npm ERR! code CERT_HAS_EXPIREDnpm ERR! errno CERT_HAS_EXPIRED reason: certificate has expired-证书错误通用问题解决方案-优雅草央千澈
nodejs安装之npm ERR! code CERT_HAS_EXPIREDnpm ERR! errno CERT_HAS_EXPIRED reason: certificate has expired-证书错误通用问题解决方案-优雅草央千澈
1258 27
|
8月前
node环境之当我们遇到需要付费的依赖库@fortawesome/fontawesome-pro导致npm install无法进行怎么办-fontawesome-pro依赖库
node环境之当我们遇到需要付费的依赖库@fortawesome/fontawesome-pro导致npm install无法进行怎么办-fontawesome-pro依赖库
194 3
node环境之当我们遇到需要付费的依赖库@fortawesome/fontawesome-pro导致npm install无法进行怎么办-fontawesome-pro依赖库
|
11月前
|
移动开发 小程序 数据可视化
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
1616 3
|
11月前
|
缓存 JavaScript 前端开发
拿下奇怪的前端报错(三):npm install卡住了一个钟- 从原理搞定安装的全链路问题
本文详细分析了 `npm install` 过程中可能出现的卡顿问题及解决方法,包括网络问题、Node.js 版本不兼容、缓存问题、权限问题、包冲突、过时的 npm 版本、系统资源不足和脚本问题等,并提供了相应的解决策略。同时,还介绍了开启全部日志、使用替代工具和使用 Docker 提供 Node 环境等其他处理方法。
7476 1
|
11月前
|
资源调度 前端开发 JavaScript
React 安装(NPM)
10月更文挑战第6天
205 1
|
11月前
|
缓存 资源调度 持续交付
在清空NPM缓存后,我如何检查是否所有依赖都已正确安装?
【10月更文挑战第5天】在清空NPM缓存后,我如何检查是否所有依赖都已正确安装?
|
12月前
|
JavaScript
使用npm,快速构建第一个vue项目
本文介绍了如何使用npm快速构建第一个Vue项目。步骤包括确保安装了Node.js并且配置了正确的环境变量,创建一个空文件夹并使用VSCode打开,通过VSCode的终端执行`npm init vue@latest`命令以初始化项目,选择默认配置即可。接着安装项目依赖并启动开发服务器,最后通过浏览器访问开发服务器提供的本地地址查看项目运行结果。文章还提供了相关代码和操作截图。
|
12月前
9-14|npm install --global windows-build-tools 安装太慢了,能够指定国内源
9-14|npm install --global windows-build-tools 安装太慢了,能够指定国内源

热门文章

最新文章

推荐镜像

更多
  • NPM