【Vue学习】- Node.js入门学习

怼烎@ 2021-09-21 10:16 455阅读 0赞

> 原文地址：[https://onestar.newstar.net.cn/blog/58][https_onestar.newstar.net.cn_blog_58]
> 
> 本文将从Node的介绍、安装、基本使用以及Node的管理工具NPM进行学习

*  一、概述
    
     *  1. 是什么Node.js
     *  2. Node.js优势
 *  二、Node.js安装
    
     *  1. 下载
     *  2. 安装查看版本
     *  3. 使用运行
 *  三、Node.js包管理工具NPM
    
     *  1. 什么是NPM
     *  2. 使用NPM管理项目
        
         *  2.1 创建项目文件夹
         *  2.2 初始化项目
         *  2.3 修改npm镜像
         *  2.4 NPM下载依赖
         *  2.5 根据package.json下载依赖
     *  3. NPM其他命令

# 一、概述 #

## 1. 是什么Node.js ##

Node.js 是一个基于 Chrome V8 引擎 的 JavaScript 运行环境。就像java的运行环境jdk，Node.js是JavaScript的运行环境，不需要浏览器，直接使用node.js运行JavaScript代码

## 2. Node.js优势 ##

1.  Nodejs基于Javascript语言，不用再单独新学一门陌生的语言，从而减低了学习的门槛。同时，Javascript语言在Web前端开发中至 关重要，特别HTML5的应用必须要使用，所以前后台统一语言，不仅可以实现程序员的全栈开发，还可以统一公共类库，代码标准化。单凭这一 点，Nodejs就已经赢得市场的青睐了。
2.  Nodejs并没有重新开发运行时环境，而是选择了目前最快的浏览器内核V8做为执行引擎，保证了Nodejs的性能和稳定性。
3.  Nodejs的开发非常高效，而且代码简单，得意于Nodejs的单线程机制。而Nodejs的另一个特点异步编程，让Nodejs处理IO密集型应用有了明显的优势。个人感觉，用Nodejs比Java做Web开发要高效10倍，比PHP的代码还要简单。
4.  Nodejs的社区在壮大，不仅包的数量在快速增加，而且包的质量也要明显好于其他语言的。很多明星级的包，都是简单而灵巧的，为了开发者的使用习惯而设 计。我最常用到的工具包，[如socket.io][socket.io], moment.js, underscore.js, async.js, express.js, bower.js, grunt.js, forever.js…，确实在改变我以前的编程习惯。

# 二、Node.js安装 #

## 1. 下载 ##

官网：[https://nodejs.org/en/][https_nodejs.org_en]

中文网：[http://nodejs.cn/][http_nodejs.cn]

## 2. 安装查看版本 ##

命令窗口执行命令，出现版本号则表示安装成功

node -v

## 3. 使用运行 ##

既然不用浏览器，那要怎么运行呢，可以在终端命令行运行，命令：node 路径名称，在vscode中，快捷键 Ctrl+ ~ ，可以打开命令行终端，进入目录，执行命令即可

node test.js

# 三、Node.js包管理工具NPM #

## 1. 什么是NPM ##

NPM全称Node Package Manager，是Node.js包管理工具，是全球最大的模块生态系统，里面所有的模块都是开源免费的；也是Node.js的包管理工具，相当于前端的Maven，对比Maven进行理解：

*  在后端开发中，使用Maven来构建项目，管理jar包依赖，可以联网下载jar包依赖
 *  在前端开发中，使用NPM来管理项目，管理js依赖，联网下载js依赖，比如JQuery

安装Node时，npm也会自动安装上，可以使用命令查看：npm -v

#在命令提示符输入 npm -v 可查看当前npm版本
    npm -v

## 2. 使用NPM管理项目 ##

### 2.1 创建项目文件夹 ###

使用vscode创建一个文件夹，用来作为项目目录，这里命名为：npmpro

### 2.2 初始化项目 ###

\[Ctrl + ~\]快捷键打开vscode命令行终端，进入项目目录，执行命令初始化：

#初始化命令
    npm init
    
    #如果想直接生成 package.json 文件，那么可以使用命令
    npm init -y

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L09uZV9MX1N0YXI_size_16_color_FFFFFF_t_70][]

按照提示一直回车即可，对以下信息做出说明：

>  *  name: 项目名称
>  *  version: 项目版本号
>  *  description: 项目描述
>  *  keywords: \{Array\}关键词，便于用户搜索到我们的项目
>  *  最后会生成package.json文件，这个是包的配置文件，相当于maven的pom.xml

### 2.3 修改npm镜像 ###

NPM官方的管理的包都是从 [http://npmjs.com下载的][http_npmjs.com]，但是这个网站在国内速度很慢。 这里推荐使用淘宝 NPM 镜像 [http://npm.taobao.org/][http_npm.taobao.org] ，淘宝 NPM 镜像是一个完整 [npmjs.com][] 镜像，同步频率目前为 10分钟一次，以保证尽量与官方服务同步。

#经过下面的配置，以后所有的 npm install 都会经过淘宝的镜像地址下载
    npm config set registry https://registry.npm.taobao.org 
    
    #查看npm配置信息
    npm config list

### 2.4 NPM下载依赖 ###

使用 npm install 安装依赖包的最新版本，也可以指定下载版本

#下载最新版本JQuery依赖
    npm install jquery
    
    #如果安装时想指定特定的版本
    npm install jquery@2.1.x

安装后

>  *  依赖会安装在项目目录\\node\_modules
>  *  安装会自动在项目目录下添加 package-lock.json文件，这个文件帮助锁定安装包的版本
>  *  同时package.json 文件中，依赖包会被添加到dependencies节点下，类似maven中的 <dependencies>

![20200820131034344.jpeg][]

### 2.5 根据package.json下载依赖 ###

很多时候，我们只会有package.json文件，这时，就需要根据package.json来下载依赖

#根据package.json下载依赖
    npm install

## 3. NPM其他命令 ##

#当前环境中安装插件
    npm install --save-dev eslint
    #或
    npm install -D eslint
    
    #全局环境安装插件
    npm install -g webpack
    
    #更新包（更新到最新版本）
    npm update 包名
    #全局更新
    npm update -g 包名
    
    #卸载包
    npm uninstall 包名
    #全局卸载
    npm uninstall -g 包名

【点关注，不迷路，欢迎持续关注本站】

--------------------

![image][]

[https_onestar.newstar.net.cn_blog_58]: https://onestar.newstar.net.cn/blog/58
[socket.io]: http://xn--socket-hh4k.io
[https_nodejs.org_en]: https://nodejs.org/en/
[http_nodejs.cn]: http://nodejs.cn/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L09uZV9MX1N0YXI_size_16_color_FFFFFF_t_70]: /images/20210920/42fed6e2c0524dc3aab13523136b3bb2.png
[http_npmjs.com]: http://npmjs.xn--com-128d736p6k5a
[http_npm.taobao.org]: http://npm.taobao.org/
[npmjs.com]: http://npmjs.com
[20200820131034344.jpeg]: /images/20210920/ec0d220a9a8e4623a91a68f2afd2983d.png
[image]: /images/20210920/34ad0a29c10f4016a455c5bb0543ddf6.png