Node.js的安装与环境的搭建(详细版)
作者:mmseoamin日期:2023-12-13

一、相关概念

  • npm: Nodejs下的包管理器。

    • webpack: 它主要的用途是通过CommonJS的语法把所有浏览器端需要发布的静态资源做相应的准备,比如资源的合并和打包

      • vue-cli: 用户生成Vue工程模板(帮你快速开始一个vue的项目,也就是给你一套vue的结构,包含基础的依赖库,只需要 npm install就可以安装)

        二、Node.js的安装和配置环境变量

        1、下载Node.js(这里我以node-v14.15.5下载为例)

        注意:
        • 建议下载v12.16.0版本以上的,因为版本低无法创建Vue的脚手架

          文件选择:
          • Mac选择pkg版本下载,windows选择msi格式的下载

            下载方式1:
            • 从官网下载:http://nodejs.cn/download/

              Node.js的安装与环境的搭建(详细版),第1张
              下载方式2:
              • 从这个https://nodejs.org/download/release/网站下载,选择自己想要的版本

                Node.js的安装与环境的搭建(详细版),第2张

                2、安装Node.js

                1、双击下载好的安装文件
                Node.js的安装与环境的搭建(详细版),第3张
                2、进入Node.js安装步骤,点击“Next”继续
                Node.js的安装与环境的搭建(详细版),第4张
                3、选择I accept the terms in the License Agreement,点击“Next”继续
                Node.js的安装与环境的搭建(详细版),第5张
                4、选择安装路径,安装路径尽量不要存在中文(建议不要安装在C盘),点击“Next”继续
                Node.js的安装与环境的搭建(详细版),第6张
                5、Add to PATH:默认会添加到path环境变量中,点击“Next”继续
                Node.js的安装与环境的搭建(详细版),第7张
                6、点击“Finsh”完成
                Node.js的安装与环境的搭建(详细版),第8张
                7、安装后里面的文件如图
                Node.js的安装与环境的搭建(详细版),第9张

                三、安装后判断是否安装成功以及环境变量配置

                1、输入命令查看版本,判断是否安装成功
                • mac首次安装都无需配置环境变量

                  • 命令的话都一样的,Windows也是这样用

                    • 使用window+ R快捷键,启动cmd命令行验证node.js是否安装成功

                      • 一般新的node安装自带npm包管理器,集成在node中

                        Node.js的安装与环境的搭建(详细版),第10张

                        出现以上情况,即表示安装成功

                        2、设置电脑环境变量

                        环境变量界面打开顺序:右键 “我的电脑”=》属性=》高级系统设置=》环境变量,具体实行过程,请看下图:

                        Node.js的安装与环境的搭建(详细版),第11张
                        3、在系统变量中新建环境变量NODE_PATH

                        在系统变量中新建环境变量NODE_PATH值为 D:\Program Files\nodejs\node_global\node_modules其中 D:\Program Files\nodejs\node_global是新创建的全局模块安装路径

                        Node.js的安装与环境的搭建(详细版),第12张

                        4、修改【用户变量】

                        修改【用户变量】中的 path 变量,将C:\Users\Lenovo\AppData\Roaming\npm 修改为D:\ProgramFiles\nodejs\node_global

                        Node.js的安装与环境的搭建(详细版),第13张

                        四、自定义配置全局模块和缓存路径

                        在上面已经完成了 node.js 的安装,即使不进行此步骤的环境变量配置也不影响node.js的使用

                        但是,若不进行环境变量配置,那么在使用命令安装 node.js全局模块(如:npm install -g vue)时,会默认安装到C盘的路径(C:\Users\hua\AppData\Roaming\npm)中

                        因此,需要配置全局安装模块 node_global 以及 缓存目录 node_cache 的环境变量

                        1、在node.js的安装目录中,新建两个文件夹 node_global 和 node_cache,分别用来存放安装的全局模块和全局缓存信息
                        Node.js的安装与环境的搭建(详细版),第14张
                        2、设置全局模块安装路径和全局缓存存放路径

                        创建完两个文件夹后,在cmd窗口中输入以下命令(两个路径即是两个文件夹的路径):

                        # 设置全局模块安装路径

                        npm config set prefix" D:\Program Files\nodejs\node_global "

                        # 设置全局缓存存放路径

                        npm config set cache" D:\Program Files\nodejs\node_cache "

                        命令执行,效果如图:

                        Node.js的安装与环境的搭建(详细版),第15张
                        3、在cmd 命令行中,通过命令配置淘宝镜像

                        npm config set registry=http://registry.npm.taobao.org

                        Node.js的安装与环境的搭建(详细版),第16张

                        输入npm config list查看npm的配置

                        Node.js的安装与环境的搭建(详细版),第17张

                        检测一下淘宝镜像站:npm configget registry

                        Node.js的安装与环境的搭建(详细版),第18张

                        4、测试安装express模块

                        如果以上的步骤你都没有问题,这个时候就可以使用npm install安装命令来安装模块了,以express为例:

                        npm install express -g # -g是全局安装的意思

                        如下图所示,则说明安装成功,并且你会在node_global目录下的node_module文件夹中看到安装好的express的文件夹

                        Node.js的安装与环境的搭建(详细版),第19张
                        5、安装cnpm输入以下命令

                        npm install -g cnpm--registry=https://registry.npm.taobao.org

                        npm install -g cnpm --registry=http://registry.npm.taobao.org

                        因为cnpm会被安装到D:\Program Files\nodejs\node_global下,而系统变量path并未包含该路径。此时使用cnpm的命令会提示我们:

                        "cnpm" 不是内部或外部命令,也不是可运行的程序或批处理文件

                        我们在系统变量path下添加该路径即可正常使用cnpm:

                        Node.js的安装与环境的搭建(详细版),第20张 Node.js的安装与环境的搭建(详细版),第21张

                        再来输入一次cnpm -v命令,检查

                        Node.js的安装与环境的搭建(详细版),第22张

                        cnpm一键安装package.json里的 dependencies 和devDependencies里的所有模块

                        cnpm install 默认安装package.json中的所有模块

                        • 如果只想安装dependencies中的内容,可以使用--dependencies字段:

                          cnpm install--dependencies

                          • 同样只想安装devDependencies中的内容,可以使用--devDependencies字段:

                            cnpm install--devDependencies

                            • 这里安装的package.json中所有依赖的模块,都是package.json中指定的版本。如果需要安装最新的版本则要:

                              cnpm update//要安装的模块的名字

                              6、配置yarn

                              # 下载并全局安装yarn

                              npm install -g yarn

                              Node.js的安装与环境的搭建(详细版),第23张

                              查看当前源

                              yarn config getregistry

                              Node.js的安装与环境的搭建(详细版),第24张

                              # 配置yarn的淘宝源

                              yarn config set registry=https://registry.npm.taobao.org-g

                              yarn config setregistry https://registry.npm.taobao.org -g

                              yarn config setsass_binary_site http://cdn.npm.taobao.org/dist/node-sass -g

                              Node.js的安装与环境的搭建(详细版),第25张 Node.js的安装与环境的搭建(详细版),第26张

                              # yarn安装项目依赖

                              yarn install

                              Node.js的安装与环境的搭建(详细版),第27张
                              7、其他一些命令

                              安装npm包–rimraf : npm install rimraf -g

                              执行命令删除依赖 : 1rimraf node_modules

                              清理npm缓存命令 : npm cache clear --force 或-f

                              npm安装vue-cli : cnpm install -gvue-cli (命令中 -g 表示全局安装)

                              更新npm包 : npminstall npm -g,再来查看npm的版本 npm -v,可以对比之前的版本