js安装详细步骤教程安详严整_node【www.js8331.com】

什么是Node.js?

1. 技术目标

  • NodeJS下载
  • NodeJS安装配置
  • 与WebStorm整合使用
  • Hello World入门
  • 开源项目实战

简单的说 Node.js 就是运行在服务端的 JavaScript。

2. 技术介绍

Node.js是一个基于 Chrome V8 引擎的 JavaScript 运行环境;

2.1 什么是NodeJS?

Node.js® is a JavaScript runtime built on Chrome’s V8 JavaScript
engine.
Node.js uses an event-driven, non-blocking I/O model that makes it
lightweight and efficient. Node.js’ package ecosystem,
npm, is
the largest ecosystem of open source libraries in the world.

Node.js使用一个事件驱动、非阻塞式 I/O 的模型,使其轻量且高效;

2.2 什么是NodeJS与Npm的关系?

npm的作用就是对Node.js依赖的包进行管理,也可以理解为用来安装/卸载Node.js需要装的东西。

Node.js的软件包生态系统npm是全球最大的开源库生态系统。

3. 环境配置

安装教程

3.1 基础工具
  • NodeJS安装包
  • WebStorm安装包

本机环境:Windows 7 旗舰版 64bit操作系统

3.2 下载及参考地址
  • NodeJS官网地址
  • Jetbrains官网地址
  • Npmjs地址
  • GitHub地址
  • Stackoverflow官网地址

1.下载安装包

3.2 安装配置

Node.js 官方网站下载:

3.2.1 绿色版本安装配置

www.js8331.com 1

绿色版本下载

下载完成,安装包如下:

3.2.2 msi版本安装配置

www.js8331.com 2

下载

步骤一:运行下载后的.msi文件
一路下一步就可以了,我选择的安装路径为E:Program
Filesnodejs,安装之后运行cmd,执行node -v 和 npm -v命令

www.js8331.com 3

安装版本

步骤二:配置npm的全局模块
配置npm的全局模块的存放路径以及cache的路径,我选择的路径使Node.js的安装路径,在此路径下建两个文件夹node_global
和 node_cache,现在的文件目录如下

www.js8331.com 4

配置文件目录

说明:这里的环境配置主要配置的是npm安装的全局模块所在的路径,以及缓存cache的路径,之所以要配置,是因为以后在执行类似:npm
install express [-g]
(后面的可选参数-g,g代表global全局安装的意思)的安装语句时,会将安装的模块安装到【C:Users用户名AppDataRoamingnpm】路径中,占C盘空间。例如:我希望将全模块所在路径和缓存路径放在我node.js安装的文件夹中,则在我安装的文件夹【D:Developnodejs】下创建两个文件夹【node_global】及【node_cache】创建完两个空文件夹之后,打开cmd命令窗口,命令输入:

npm config set prefix "D:2018devsoftwebnodejsnode_global"
npm config set prefix "D:2018devsoftwebnodejsnode_cache"

步骤三:配置系统环境变量
新建NODE_PATH环境变量

D:2018devsoftwebnodejsnode_globalnode_modules

步骤四:配置用户环境变量
修改用户变量下的Path

D:2018devsoftwebnodejsnode_global

步骤五:更改镜像源

国内淘宝的在cmd输入命令:npm config set registry https://registry.npm.taobao.org
在cmd输入命令:npm config set registry http://registry.cnpmjs.org/

双击打开安装,下一步下一步即可(笔者安装路径为“D:Program
Filesnodejs”):

4. Hello World(vue-cli)

安装成功,测试安装是否成功,运行CMD,分别输入node -v 和 npm -v
分别查看node和npm的版本号,如下图所示:

4.1 创建项目

$ npm install -g vue-cli
$ vue init webpack vue

www.js8331.com 5

创建过程图

安装完成后系统目录如图所示(其中,npm随安装程序自动安装,作用就是对Node.js依赖的包进行管理):

4.2 添加项目依赖

# 安装依赖
cnpm install(npm install --registry=https://registry.npm.taobao.org)
# 安装其他插件
cnpm install vuex elementui axios mockjs --save

www.js8331.com 6

项目整体结构

3.配置npm在安装全局模块时的路径和缓存cache的路径

4.3 运行项目

D:2018devcodeWebStormnodejsvue>npm run dev

因为在执行例如npm install webpack -g等命令全局安装的时候,默认会将模块安装在C:Users用户名AppDataRoaming路径下的npm和npm_cache中,不方便管理且占用C盘空间,

4.4 第一张页面

所以这里配置自定义的全局模块安装目录,在node.js安装目录下新建两个文件夹
node_global和node_cache,如图所示:

4.4.1

然后在cmd命令下执行如下两个命令:

5. 技术实践

npm config set prefix "D:Program Filesnodejsnode_global"npm config set cache "D:Program Filesnodejsnode_cache"

5. 1 克隆前端页面项目

git clone -b clean https://gitee.com/log4j/pig-ui    // clean分支

执行命令,如下图所示:

5.12 安装依赖

npm install
//or # 建议不要用cnpm  安装有各种诡异的bug 可以通过如下操作解决npm速度慢的问题
npm install --registry=https://registry.npm.taobao.org

执行完后,配置环境变量,如下:

5. 3 本地开发 开启服务

npm run dev

“环境变量” -> “系统变量”:新建一个变量名为 “NODE_PATH”,
值为“D:Program Filesnodejsnode_modules”,如下图:

6. 技术总结

“环境变量” ->
“用户变量”:编辑用户变量里的Path,将相应npm的路径(“C:Users用户名AppDataRoamingnpm”)改为:“D:Program
Filesnodejsnode_global”,如下:

7. 重点强调

在cmd命令下执行 npm install webpack -g 安装webpack,如下图所示:

安装成功,自定义文件夹如下所示:

在cmd命令下执行npm webpack -v查看webpack版本,如下图所示:

总结

以上node.js的安装,笔者已亲测可用,希望本篇博客对您有所帮助,在安装配置过程中,若遇到问题,欢迎留言交流!

发表评论

电子邮件地址不会被公开。 必填项已用*标注