Vue2.x学习笔记：第0章初学NodeJS和npm

痛定思痛。 2023-07-13 13:43 33阅读 0赞

### 文章目录 ###

*   *  1、什么是nodejs？通俗讲解
     *  2、什么是npm？
     *  3、NodeJS和npm是什么关系呢?
     *  4、npm和cnpm是什么关系呢?
     *  5、安装nodejs(内嵌npm)
     *  6、试用npm及cnpm
     *  7、全局下载还是当前目录下载呢？

## 1、什么是nodejs？通俗讲解 ##

`node.js`：是javascript的一种运行环境，是对`Google V8`引擎进行的封装。是一个服务器端的`javascript`的解释器。

`Node.js`在维基百科中就已经很明确的说明了，它是一个运行环境，并不是其他的什么比如软件库，简而言之，和C\#所需要的编译环境一样，`Node.js`就是`JavaScript`的编译环境，它存在的目的就是为了让JavaScript可以和其他的后端语言一样能够在浏览器上运行，换种说法就是，可以让前端语言JavaScript在写完之后交给`Node.js`进行编译和解释，它的存在对于`JavaScript`有了质的飞跃，对于一个前端来说利用JavaScript就可以编译后台代码是一件多么爽飞天的事情。

简单的`Node.js`命令就是：

#node hello.js

类比理解：

> `nodejs`不是一个js框架，千万不要认为是类似`jquery`的框架，`nodejs`是js运行时，运行环境，类比`java`中`jvm`，`java`的开端是什么，无疑是`jvm`，自从有了`jvm`，`java`才能吹牛说自己是“一次编写处处运行”，不管你是`windows`还是`linux`，只要安装了对应版本的`jvm`都可以运行`.class`文件。同样`nodejs`的作用和`jvm`的一样一样的，也是`js`的运行环境，不管是你是什么操作系统，只要安装对应版本的`nodejs`，那你就可以用js来开发后台程序。

## 2、什么是npm？ ##

`npm`：全称是`Node Package Manager`，是一个`NodeJS`包管理和分发工具，已经成为了非官方的发布`Node`模块（包）的标准。类似于后台开发的jar包依赖管理：`Maven`。

其实`npm`是`nodejs`的包管理器（package manager）。我们在`Node.js`上开发时，会用到很多别人已经写好的`javascript`代码，如果每当我们需要别人的代码时，都会到官方网站下载源码，解压，再引入使用，会非常麻烦。于是就出现了包管理器`npm`。

大家把自己写好的源码上传到`npm`官网上，如果要用某个或某些个，直接通过`npm`安装就可以了，不用管那个源码在哪里。并且如果我们要使用模块A，而模块A又依赖模块B，模块B又依赖模块C和D，此时`npm`会根据依赖关系，把所有依赖的包都下载下来并且管理起来。试想如果这些工作全靠我们自己去完成会多么麻烦！

## 3、NodeJS和npm是什么关系呢? ##

包含关系，`nodejs`中含有`npm`，比如说你安装好`nodejs`，你打开`cmd`输入`npm -v`会发现`npm`的版本号，说明`npm`已经安装好。

## 4、npm和cnpm是什么关系呢? ##

因为`npm`安装插件是从国外服务器下载，受网络影响大，可能出现异常，如果`npm`的服务器在中国就好了，所以我们乐于分享的淘宝团队干了这事。`cnpm`就是中国的`npm`插件，你只需知道这个命令和npm一致，并且下载速度快就可以了。

## 5、安装nodejs(内嵌npm) ##

下载地址：`https://nodejs.org/en/download/`  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hvdXBlaWJpbjIwMTI_size_16_color_FFFFFF_t_70]  
下载之后安装：`windows`下安装`msi`方式的安装包，很简单，基本就是一路点击鼠标确认下来的，所以就不详说了。  
安装完毕后，打开`cmd`命令窗口，输入`cpm -v` 查看版本号。  
![在这里插入图片描述][20200312160721773.png]

安装cnpm插件：`npm install cnpm -g –registry=https://registry.npm.taobao.org`  
![在这里插入图片描述][20200312161041885.png]  
通过：cnpm -v 查看插件版本  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hvdXBlaWJpbjIwMTI_size_16_color_FFFFFF_t_70 1]

## 6、试用npm及cnpm ##

cnpm install vue -g  全局安装：模块将被下载安装到【全局目录】中；
    cnpm install vue，则是将模块下载到当前命令行所在目录

怎么查看默认的全局目录呢？

cnpm config list

比如我我们到D：盘下创建work目录，并在work目录下创建工程目录mytest，然后打开cmd  
进入：D:\\work\\mytest 目录，执行：cnpm install vue 查看此目录是否会成功下载vue。  
![在这里插入图片描述][20200312163357490.png]  
从截图可以看出，会默认创建node\_modules目录，并在此目录下下载vue目录。

这样npm的使用就介绍完毕，那么我们在开发时，到底需要进行全局下载还是当前目录下载呢？

## 7、全局下载还是当前目录下载呢？ ##

命令中，全局安装（global）和本地安装（local）方式的区别为带参数-g和不带参数-g。具体区别：

npm install moduleName ，则是将模块下载到当前命令行所在目录。npm install moduleName -g ，模块将被下载安装到全局目录中，即Node的安装目录下的node\_modules下2.调用方式：

在代码中，本地安装可以直接通过require()的方式引varmoduleName=require(‘moduleName’);全局的安装是供命令行(command line)使用的，比如grunt，全局安装的方式是没有办法用require调用包的

因此我们开发时，基本上是需要把依赖的包进行本地下载的。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hvdXBlaWJpbjIwMTI_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200312153028714.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hvdXBlaWJpbjIwMTI=,size_16,color_FFFFFF,t_70
[20200312160721773.png]: https://img-blog.csdnimg.cn/20200312160721773.png
[20200312161041885.png]: https://img-blog.csdnimg.cn/20200312161041885.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hvdXBlaWJpbjIwMTI_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200312161132354.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hvdXBlaWJpbjIwMTI=,size_16,color_FFFFFF,t_70
[20200312163357490.png]: https://img-blog.csdnimg.cn/20200312163357490.png