什么是Node.js?
简单的说 Node.js 就是运行在服务端的 JavaScript。
Node.js是一个基于 Chrome V8 引擎的 JavaScript 运行环境;
Node.js使用一个事件驱动、非阻塞式 I/O 的模型,使其轻量且高效;
Node.js的软件包生态系统npm是全球最大的开源库生态系统。
(1)下载安装包
Node.js 官方网站下载:https://nodejs.org/en/download/
当前安装的最新版本为: Latest LTS Version: 14.15.0 (includes npm 6.14.8)
(2)双击打开安装,下一步下一步安装提示进行安装即可,本博主安装目录为:D:\Program Files\nodejs\
安装成功,测试安装是否成功,运行CMD,分别输入node -v 和 npm -v 分别查看node和npm的版本号,如下图所示:

安装完成后系统目录如图所示(其中,npm随安装程序自动安装,作用就是对Node.js依赖的包进行管理):
(3)配置npm在安装全局模块时的路径和缓存cache的路径,因为在执行例如npm install webpack -g等命令全局安装的时候,默认会将模块安装在C:\Users\用户名\AppData\Roaming路径下的npm和npm_cache中,
不方便管理且占用C盘空间,所以这里配置自定义的全局模块安装目录,在node.js安装目录下新建两个文件夹 node_global和node_cache,如图所示:
创建下面的两个目录:
D:\Program Files\nodejs\node_cache
D:\Program Files\nodejs\node_global
Win+R ——> cmd ,然后在cmd命令下执行如下两个命令:
执行如下的命令:
npm config set prefix "D:\Program Files\nodejs\node_global"
npm config set cache "D:\Program Files\nodejs\node_cache"
执行完后,配置环境变量,如下:
- “环境变量” -> “系统变量”:新建一个变量名为 “NODE_PATH”, 值为“D:\Program Files\nodejs\node_global\node_modules”,如下图:
- 环境变量” -> “用户变量”:编辑用户变量里的Path,将相应npm的路径(“C:\Users\用户名\AppData\Roaming\npm”)改为:“D:\Program Files\nodejs\node_global”,如下:
-
配置完成。
4.测试
在cmd命令下执行 npm install webpack -g 安装webpack,如下图所示
-
-
-
安装后对应目录如上图,说明webpack安装完成
-
在cmd命令下执行 webpack -v 查看webpack版本,如下图所示:
-
执行该命令提示: 执行webpack -v命令总是提示安装webpack-cli
解决方案
查看是否全局安装webpcak和webpack-cli
这里我们选择yes之后还是不行,问题出在安装webpack的时候是选择的全局安装,这里的webpack-cli也要选择全局安装
执行该命令: npm install --save-dev webpack-cli -g 再次查看如下图:
Webpack是一个打包工具,可以把js、css、node module、coffeescript、scss/less、图片等都打包在一起,方便SPA(Single Page APP)模块化开发,现在几乎所有SPA项目都是用Webpack。使用Webpack + Vue.js的方式来做项目,可以做到视图、路由、component分离,快速打包、部署和项目上线。Webpack支持,
- 支持文件:普通文件、代码文件、文件转url(图片)
- 支持JSON:普通JSON、JSON5、CSON
- 支持JS预处理:普通JS、Babel、Traceur、Typescript、Coffeescript
- 支持模板:HTML、Pug、JADE、Markdown、PostHTML、Handlebars
- 支持Style:普通style、import、LESS、SASS/SCSS、Stylus、Post CSS
- 支持框架:Vue.js、Angular2、Riot
至此,node.js安装完成
vue.js开发环境搭建:
配置镜像加速:
使用node.js npm工具download ,但是npm工具在国内网络比较慢,所以建议走cnpm 镜像来download依赖, 装镜像cnpm,
在cmd中输入: npm config set registry=http://registry.npm.taobao.org
使用npm config list可以查看配置信息:
使用命令npm config get registry查看镜像:
使用npm info vue查看Vue模块信息: