Node+Npm安装配置

1. 技术目标

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

2. 技术介绍

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.

2.2 什么是NodeJS与Npm的关系?

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

3. 环境配置

3.1 基础工具
  • NodeJS安装包
  • WebStorm安装包
3.2 下载及参考地址
  • NodeJS官网地址
  • Jetbrains官网地址
  • Npmjs地址
  • GitHub地址
  • Stackoverflow官网地址
3.2.1 绿色版本安装配置
Node+Npm安装配置_第1张图片
绿色版本下载
3.2.2 msi版本安装配置

Node+Npm安装配置_第2张图片
下载

步骤一:下载node安装包或绿色文件
1、node安装包
一路下一步就可以了,我选择的安装路径为E:\Program Files\nodejs,安装之后运行cmd,执行node -v 和 npm -v命令
2、node绿色文件
直接解压文件即可,然后配置path环境变量:D:\2018dev\soft\web\nodejs
3、验证是否安装成功
Node+Npm安装配置_第3张图片
安装检查

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

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

npm config set  cache "D:\Program Files\node-v8.10.0-win-x64\node_cache"
npm config set prefix  "D:\Program Files\node-v8.10.0-win-x64\node_global"

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

D:\2018dev\soft\web\nodejs\node_global\node_modules

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

D:\2018dev\soft\web\nodejs\node_global

步骤五:更改镜像源

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

直接设置 --registry (推荐)

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

cnpm 安装完成后,以后就可以用cnpm代替 npm, 此时npm还是会用官方镜像,cnpm会用国内镜像

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

如果要恢复成原来的设置,执行如下:

npm config set registry https://registry.npmjs.org/

查看 淘宝镜像设置情况

npm get registry 

4. Hello World(vue-cli)

4.1 创建项目

$ npm install -g vue-cli
$ vue init webpack vue
Node+Npm安装配置_第5张图片
创建过程图

4.2 添加项目依赖

# 安装依赖
cnpm install(npm install --registry=https://registry.npm.taobao.org)
# 安装其他插件
cnpm install vuex elementui axios mockjs --save
Node+Npm安装配置_第6张图片
项目整体结构

4.3 运行项目

D:\2018dev\code\WebStorm\nodejs\vue>npm run dev

4.4 第一张页面

4.4.1 第一步

在组件总目录下面新建一个你要写的组件的目录,并新建一个你要写的组件,如test/test.vue

Node+Npm安装配置_第7张图片
第一步.png
4.4.2 第二步

编写组件内容(组件就是把功能拆分出来,然后哪里需要这个组件,就在哪里去引入就行了)


Node+Npm安装配置_第8张图片
第二步.png
4.2.3 第三步

修改路由,将新写的组件插入到路由里面去(找到src/router/router.js,将页面组件(如刚写的test.vue)添加到appRouter里面去)

Node+Npm安装配置_第9张图片
第三步.png

5. 技术实践

5. 1 克隆前端页面项目

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

5.2 安装依赖

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

5. 3 开启服务

npm run dev

5. 4 打包服务

npm run build

你可能感兴趣的:(Node+Npm安装配置)