Windows7系统环境下：node.js，npm,cnpm,webpack,webpack-cli,vue-cli的认识和安装

node.js是什么

• 简单的说 Node.js 就是运行在服务端的 JavaScript。
• Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台。
• Node.js是一个事件驱动I/O服务端JavaScript环境，基于Google的V8引擎，V8引擎执行Javascript的速度非常快，性能非常好。

node的安装

• 下载地址：http://nodejs.cn/

• 安装：这里安装的是Windows7,64位的
  node-v8.11.4-x64.msi

• 安装步骤，双击下载下来的安装文件，按提示填写安装路径，然后就是一路的next，直到最后的installed，然后就是完成

• 检查是否安装成功

• cmd 打开命令窗口输入 path检查安装的时候时候自动给你添加上环境配置

• 然后继续输入node -v 检查node的版本号

• 然后就是检查npm的版本号，这是node的安装的时候，自带安装的一个管理工具
  至此安装完成

• 如图下所示

image.png

npm介绍

• NPM是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题，常见的使用场景有以下几种：
  • 允许用户从NPM服务器下载别人编写的第三方包到本地使用。
  • 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。
  • 允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。

由于新版的nodejs已经集成了npm，所以之前npm也一并安装好了。同样可以通过输入 "npm -v" 来测试是否成功安装。命令如下，出现版本提示表示安装成功

• npm -v

安装cnpm

• 由于npm有些资源被屏蔽或者是国外资源的原因，经常会导致用npm安装依赖包的时候失败，所以建议使用npm的国内镜像---cnpm

• 下载：在命令行中输入 npm install -g cnpm --registry=http://registry.npm.taobao.org
  

  

  image.png

webpack

• webpack是什么

  
  
  

  image.png
  • 可以看做是模块打包机：它做的事情是，分析你的项目结构，找到 JavaScript 模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript 等），并将其转换和打包为合适的格式供浏览器使用

• 或者是：webpack是一个前端模块化方案，更侧重模块打包，我们可以把开发中的所有资源（图片、js 文件、css 文件等）都看成模块，通过 loader（加载器）和 plugins（插件）对资源进行处理，打包成符合生产环境部署的前端资源。

• 举个例子，很多人开发了各种优秀的 JavaScript 模块或组件，我们不想重复发明轮子，而是想直接利用别人的模块，就是类似 require 或 include 这样的机制，把别人的模块引入进来，但是 JavaScript 又没有 类或包 这样的概念，那应该如何做呢？

• 如何去引入别人的模块？引入之后保证各种依赖关系不出错？这就是 webpack 要解决的问题。

• 模块化的概念我们理解了，那如何理解 打包 这个词呢？ 其实，模块化的问题解决之后，webpack 就能把各种资源模块打包合并成一个文件输出给浏览器。在打包的过程中还能对这些资源进行处理，比如压缩减少体积，把 sass 编译成 css, coffee 编译成 js。所以它在某些程度上，跟grunt/gulp 的功能有些相同

• 与 grunt/gulp 的区别:虽然都是前端自动化构建工具，但看他们的定位就知道不是对等的。grunt/gulp 严格上讲，模块化不是他强调的东西，他旨在规范前端开发流程。webpack 更是明显强调模块化开发，而那些文件压缩合并、预处理等功能，不过是他附带的功能。

• 打个比方，如果你的工程模块依赖很简单，不需要把 js 或各种资源打包，只需要简单的合并、压缩，那就不需要 webpack。grunt/gulp 就够用了。反过来，如果你的工程庞大，页面中使用了很多库（SPA很容易出现这种情况），那就可以选择使用 webpack，因为这样既能做到模块化管理，也能做到 grunt/gulp 的一些功能，比如压缩，转化coffeescript 为 js 等。

• webpack下载

image.png

• 安装vue-cli
• vue-cli是什么
  • vue-cli这个构建工具大大降低了webpack的使用难度，支持热更新，有webpack-dev-server的支持，相当于启动了一个请求服务器，给你搭建了一个测试环境，只关注开发就OK。
• 安装 ：cnpm install vue-cli -g

image.png

image.png

补充

• 这里检查webpack的时候没有显示他的版本号，说明没有安装成功。

  
  
  

  image.png
  
  

  是因为webpack 4.X 开始，需要安装 webpack-cli 依赖 ,所以使用这条命令 npm install webpack webpack-cli -g 来安装，安装成功后先检查webpack的版本号，就能正常显示出来了

  
  
  

  image.png

这里应该是学习vue前端框架的一些关于环境和工具的安装使用教程总结。既是对自己学习的记录，也是希望对你有用！

在学习的过程中查看的一些网上资料，链接如下

• https://blog.csdn.net/wulala_hei/article/details/80488674
• https://blog.csdn.net/wypersist/article/details/80492576
• https://blog.csdn.net/WYpersist/article/details/80496259
• http://www.runoob.com/nodejs/nodejs-tutorial.html
• https://blog.csdn.net/helloxiaoliang/article/details/78436364
• https://www.webpackjs.com/