npm安装-详细教程

这篇具有很好参考价值的文章主要介绍了npm安装-详细教程。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

npm安装教程

第一章 Vue学习入门之 Node.js 的使用


前言

随着时代的不断发展,前端学习这门技术也越来越重要,很多人都开启了学习前端学习,本文就介绍了前端学习的基础内容——npm安装。


一、npm是什么?

npm 是 NodeJS 下的包管理器,vue-cli脚手架模板就是基于 node 下的 npm 来完成安装的。

相关介绍~
webpack: 它的主要用途是通过CommonJS的语法把所有浏览器端需要发布的静态资源做相应的准备,比如资源的合并和打包。
vue-cli:官方提供的一个脚手架,用于快速生成一个 vue 的项目模板。

二、安装、配置环境变量

1.下载并安装NodeJS

windows下的NodeJS安装是比较方便的(v0.6.0版本之后,支持windows native),只需要直接访问官网(https://nodejs.cn/download/),这里我们可以选择 Windows 安装包 (.msi)-64位 进行安装。
怎么安装npm,npm,vue.js,前端
或者直接登陆官网 http://nodejs.org/
怎么安装npm,npm,vue.js,前端

  • 安装过程基本一路直接“NEXT”就可以了,直到Finished。
    怎么安装npm,npm,vue.js,前端
    怎么安装npm,npm,vue.js,前端
    怎么安装npm,npm,vue.js,前端
    windows下,安装msi文件在过程中会直接添加path的系统变量,变量值是你的安装路径,例如“D:\RunSoftware\nodejs”

怎么安装npm,npm,vue.js,前端
怎么安装npm,npm,vue.js,前端

  • 确认 nodejs 安装成功:
    快捷键 win+R —> 输入 cmd命令行,进入 dos 窗口:输入 node -v, 查看是否能够正确打印出版本号即可!
    怎么安装npm,npm,vue.js,前端
    node自带 npm,输入 npm -v,查看是否能够正确打印出版本号即可!
    怎么安装npm,npm,vue.js,前端

2.npm配置

npm作为一个NodeJS的模块管理,我们可以先配置npm的全局模块的存放路径以及cache的路径
(1)建立2个目录 node_cachenode_global
如果想将这两个文件夹放在NodeJS的主目录下,便在NodeJs下建立"node_global"及"node_cache"两个文件夹。如下:
怎么安装npm,npm,vue.js,前端
(2)进行配置

npm config set prefix "D:\RunSoftware\nodejs\node_global"
npm config set cache "D:\RunSoftware\nodejs\node_cache"

如果不进行这一步设置,npm的全局安装包,将不会在node安装文件夹里。
如果这个步骤出现错误,如:operation not permitted, mkdir ‘D:\RunSoftware\nodejs’,请使用管理员身份打开cmd命令行。
这里我们可以看到:
怎么安装npm,npm,vue.js,前端
(3)配置 环境变量
进入环境变量对话框,在系统变量下新建 “NODE_PATH”,输入”D:\RunSoftware\nodejs\node_global\node_modules“。
怎么安装npm,npm,vue.js,前端
怎么安装npm,npm,vue.js,前端

由于改变了module的默认地址,所以上面的用户变量都要跟着改变一下(用户变量"PATH"修改为“D:\RunSoftware\nodejs\node_global\”),否则使用 module 的时候会导致输入命令出现 “xxx不是内部或外部命令,也不是可运行的程序或批处理文件”这个错误。
怎么安装npm,npm,vue.js,前端

(4)安装 Node.js 淘宝镜像加速器(cnpm)。这样子的话,下载会快很多~

  • 配置镜像站:npm config set registry=https://registry.npm.taobao.org
    怎么安装npm,npm,vue.js,前端
    怎么安装npm,npm,vue.js,前端

  • 检查一下镜像站是否可以:npm config get registry
    怎么安装npm,npm,vue.js,前端

  • 接下来,输入命令:npm install -g cnpm --registry=https://registry.npm.taobao.org
    怎么安装npm,npm,vue.js,前端
    或者输入如下命令:文章来源地址https://www.toymoban.com/news/detail-606470.html

# -g 就是全局安装
npm install cnpm -g
# 或使用如下语句解决 npm 速度慢的问题
npm install --registry=https://registry.npm.taobao.org
  • 添加系统变量path的内容:
      因为 cnpm 会被安装到 D:\RunSoftware\nodejs\node_global 下,而系统变量path并未包含该路径。所以我们在系统变量path下添加该路径后,便可正常使用 cnpm 。
      怎么安装npm,npm,vue.js,前端
  • 然后,输入命令:cnpm -v,查看结果。
    怎么安装npm,npm,vue.js,前端
    安装过程可能会有点慢,耐心等待!虽然安装了 cnpm,但是尽量少用
    安装的位置,如下:
    怎么安装npm,npm,vue.js,前端
    至此,我们的 npm 安装就成功结束了!以上就是今天要讲的内容,本文仅仅简单介绍了npm 的安装,还有更多知识等待我们的探索!
    现在,我们就可以开启 vue-cli 学习之旅啦~小伙伴们可以看我的另一篇文章 vue-cli详细教程,希望对你们所有帮助哦~

到了这里,关于npm安装-详细教程的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • windows安装npm(Node.js)教程

    在使用之前,先了解下基础定义: npm:  nodejs 下的包管理器。 webpack: 它主要用途是通过CommonJS 的语法把所有浏览器端需要发布的静态资源作相应的准备,比如资源的合并和打包。 vue-cli: 用户生成Vue工程模板。(帮你快速开始一个vue的项目,也就是给你一套vue的结构,包含基

    2024年02月12日
    浏览(58)
  • npm安装-详细教程

    第一章 Vue学习入门之 Node.js 的使用 随着时代的不断发展,前端学习这门技术也越来越重要,很多人都开启了学习前端学习,本文就介绍了前端学习的基础内容——npm安装。 npm 是 NodeJS 下的包管理器,vue-cli脚手架模板就是基于 node 下的 npm 来完成安装的。 相关介绍~ webpack: 它

    2024年02月15日
    浏览(13)
  • npm详细安装教程

    目录 1.安装nodejs 测试 2.完善nodejs配置 2.1  配置npm的全局模块的global的路径及cache的路径 2.2  完善npm 环境变量 2.3  淘宝镜像(提升速度) 1.1  windows在官网(Node.js)下载NodeJS,如图,下载16.16.0 LTS (长期支持版本,推荐给绝大部分用户使用) 1.2  安装即可   1.3  接下来基

    2024年02月09日
    浏览(9)
  • 唯一客服系统源码独立部署版+前端VUE开源+客服uniapp源码+ChatGPT知识库安装配置详细教程...

    唯一客服系统是一款基于Golang Gin框架开发的在线客服系统,可以提供独立部署版,程序数据全部私有安装在自己服务器。访客咨询界面自适应响应式设计,完全可以适配于PC网站、移动端、APP内嵌等场景下。客服端提供PC后台管理,实时收到访客消息,实时与访客用户进行聊

    2024年02月09日
    浏览(44)
  • 下载安装npm,配置环境变量详细教程

    要在本地运行项目,就需要安装npm,其次还需要配置项目依赖node-modules。今天我们就先安装npm 在官网下载 http://nodejs.cn/download/ 选择windows或者Mac即可 可以看到版本号,说明成功了 然后验证是否能使用npm 出现这些信息,就证明成功了。 创建2个新的文件夹,用在存放全局包 分

    2024年01月21日
    浏览(70)
  • 前端js react vue怎么实现在线预览doc文档

    先说结论: 目前在纯前端层面没有很好的方案,基本都需要服务端的介入。 优点 :简单易用,无需配置 缺点 :文档需要支持外网访问,且文档会是公开可见的,所以对于一些内部敏感的文档来说,这个显然是不可行的。 需要后端介入配合 onlyoffice地址 这个也要先在服务器

    2024年02月15日
    浏览(80)
  • Vue3初学者详细教程之zip安装Node.js版本v16.6.0、vue/cli版本4.5.13、element-ui版本2.15.6、axios版本0.25.0

    《Node.js v16.6.0官网下载》 在node文件夹里面创建2个文件夹分别是node_cache和node_global 在解压路径文件夹cmd输入以下命令创建2个文件夹 新建系统变量NODE_HOME 编辑Path系统变量 测试nodejs环境变量是否生效 cmd运行 node -v 命令,输出版本号说明成功 以系统管理员的身份打开cmd命令提

    2024年02月07日
    浏览(91)
  • IDEA下载vue.js插件,IDEA搜索不到vue.js该怎么安装

    一、在IDEA插件库下载Vue.js插件 1.在File--Settings--Plugins下载 2.搜索下载,点击Apply之后再重启 二、从磁盘安装Vue.js插件 IDEA搜索不到vue.js该怎么安装,这时需要从vue.js官网去下载对应jar包进行,再进行安装 注意:安装的Vus.js版本需要于IDEA版本对应,有版本兼容问题 1.查看IDEA版

    2024年02月04日
    浏览(43)
  • Node.js安装详细教程

    1.安装Node.js 下载地址 可以自行选择 zip 或者 .msi ,推荐 .msi 下载后选择安装路径直接 next 安装 在【个人电脑】右键→【属性】→【高级系统设置】 在系统变量中查看【path】,点击【编辑】

    2024年02月09日
    浏览(47)
  • node.js详细安装教程

    1、Node.js简介 Node.js® 是一个基于 Chrome V8 引擎的 JavaScript 运行时。Node.js 使用高效、轻量级的事件驱动、非阻塞 I/O 模型。它的包生态系统,npm,是目前世界上最大的开源库生态系统。 2、下载Node.js 官方地址:https://nodejs.org/en/ 或 https://nodejs.org/zh-cn/ 如下图: 以往的版本 htt

    2024年02月05日
    浏览(87)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包