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 绿色版本安装配置

绿色版本下载

3.2.2 msi版本安装配置

下载

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

安装检查

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

配置文件目录

说明：这里的环境配置主要配置的是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

创建过程图

4.2 添加项目依赖

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

项目整体结构

4.3 运行项目

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

4.4 第一张页面

4.4.1 第一步

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

第一步.png

4.4.2 第二步

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

第二步.png

4.2.3 第三步

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

第三步.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