node.js的安装和安装环境

VUE工程化—CMD命令提示符：

cmd是command的缩写，即命令提示符（CMD）。
（1）本质：命令提示符是在操作系统中，提示进行命令输入的一种工作提示符。
（2）分类：在不同的操作系统环境下，命令提示符各不相同。
①在windows环境下，命令行程序为cmd.exe，是一个32位的命令行程序，微软Windows系统基于Windows上的命令解释程序，类似于微软的DOS操作系统（磁盘操作系统）
②一般说的“命令行”是指linux命令，linux命令是对Linux系统进行管理的命令。

特性及快捷操作：
（1）DOS 操作系统用户指令是不区分大小写的。例如：DIR、Dir、dir在DOS中的执行含义是一致的。

（2）快捷键：
①上下按钮可以切换到之前输入的指令
②输入部分文件名，按Tab键即可自动识别补全名称

（3）打开方式
①开始→所有程序→附件→命令提示符
②开始→搜索框输入：cmd/cmd.exe→回车
③Win键+R打开对话框→输入cmd/cmd.exe→回车

（4）拓展：Win键
Windows键,简称“Winkey”或“Win键”,是在计算机键盘左下角 Ctrl 和 Alt 键之间的按键

（5）拓展：常用Win键操作（DOS特性不区分大小写）
①win键打开“开始”菜单
②win+D快速回到桌面
③win+L 或者win+l等效（不区分大小写）—→锁屏
④win+X 打开任务中心
⑤win+E打开计算机
⑥win+R打开对话框
⑦Win+M最小化所有窗口
⑧win+x：Windows移动中心，快速调节音量，屏幕亮度等
⑨Win+Home：除了正在选择的这个窗口，其他窗口最小化作
⑩Win+【+/-】：打开Windows的放大、缩小功能，快捷放大镜功能
⑪Win+Tab：3D效果窗口切换（有时会出现无法切换的问题）

（5）问题：Windows7下Win+Tab不能实现3D窗口切换问题解决
原因分析：
①windows操作系统版本不够高，入家庭版，或家庭高级版（若是版本低可能就要进行系统版本升级了）
②系统版本已达要求，但是却是使用的Windows basic桌面元素（可以通过更换主题，将原有的Windows Basic桌面主题变换成其他主题

（6）兼容
windows命令行/命令处理器（Command Processor）（CMD）是Windows CE与Windows NT平台为基础的操作系统（包括Windows 2000，Windows XP，Windows Vista，Windows Server 2003，Windows 7， Windows 8 ，Windows 8.1 ，Windows 10）下的“MS-DOS 方式（微软磁盘操作系统）”。
一般Windows 的各种版本都与其兼容，用户可以在Windows 系统下运行DOS命令，中文版Windows XP 中的命令提示符进一步提高了与DOS 下操作命令的兼容性，用户可以在命令提示符直接输入中文调用文件。

windows与linux路径书写区别
对于路径中经常出现斜杠“/”和反斜杠“\”，经常会书写错误，尤其是同时在windows和linux两个操作系统中工作时，由于其路径写法的差异，更加剧了这种混淆的发生。
（1）windows OS上：使用”\”
（2）linux OS上：使用”/”
（3）任何OS 的网址：均使用”/“隔开

CMD命令
本节主要讲解下windows的CMD常用基本名
（1）进程操作—列出所有任务及进程号，杀进程
①tasklist列出任务进程（tasklist /? 获取使用帮助
②taskkill杀进程（taskkill /? 获取使用帮助）
记住该进程的PID，如PID为14496。使用命令：taskkill /pid 14496进行关闭进程，在正常情况下通过使用这个命令是可以关闭占用进程。但是也会出现无法关闭的情况。
强制关闭进程：taskkill /f /pid 14496
可以再次杀死来验证杀死与否
单词：kill杀死，force强制

（2）目录操作之查看—文件目录的查看遍历
①dir显示文件列表，即一个目录中的文件和子目录
②dir /s：查看当前目录及其所有子目录的文件和文件夹
③dir /a：查看包括隐含文件的所有文件
④dir /ah：只显示出隐含文件
⑤dir /w：以紧凑方式（一行显示多个文件）显示文件和文件夹
⑥dir /p：以分页方式（显示一页之后会自动暂停）显示
⑦dir /?获取使用帮助
⑧dir /t:c显示文件创建时间，dir /t:a显示文件上次被访问时间，dir /t:w上次被修改时间

（3）目录操作之切换—文件目录的切换跳转
①cd\跳转到当前硬盘根目录
②x:跳转到硬盘x的根目录，例如d:即可跳转到D盘根目录
③cd /? 获取使用帮助
④cd…跳转到上一层目录
⑤cd显示当前文件路径
⑥cd /d c:\users\public跳转到其他硬盘的其他文件夹（跳转到c盘的users文件夹底下的public文件夹）
注意：此处必须加/d参数，否则无法跳转。
⑦cd c:\users\public跳转到当前硬盘的其他文件
⑧cd filename跳转到当前目录下的某个文件

（4）目录操作之添加-添加创建文件夹或目录
命令：mkdir（make directory）或md命令创建一个新文件夹
语法：“mkdir文件夹”或者“md文件夹”
如果想同时创建包含子文件夹的文件夹时，可以使用
“mkdir folder\subfolder”命令，创建的多个嵌套文件采用树状结构

（4）目录操作之删除-删除文件夹或目录
命令：rmdir或者rd 删除整个目录
语法：rmdir /s/q filename
/s 是代表删除所有子目录跟其中的档案
/q 即quiet安静模式，删除档案或目录时，不再问 Yes or No? 的动作
例如：删除new_file底下的one文件夹
指定路径删除：要删除的目录也可以指定路径
删除d盘下的new_file文件下的one文件

（5）文件操作之创建-添加创建文件
命令：type nul>文件名.后缀
例如：
①创建myfile.txt文本文档类型文件
②创建mypic.jpg图片类型文件

（5）文件操作之写入-写入文件内容
命令：echo指令写入内容
语法：echo 内容 >> file.txt 将"内容"保存到file.txt文件中
案例：
将”信息”写入c盘one底下的two文件夹下的my_new_file.txt文件

（5）文件操作之覆盖-覆盖文件内容
命令：echo指令写入内容
语法：echo 内容 > file.txt 将"内容"保存到file.txt文件中，覆盖原有内容
案例：
将”888”写入c盘one底下的two文件夹下的my_new_file.txt文件

（5）文件操作之删除-删除文件
命令：del删除文件，例如del myfile.txt即为删除当前文件夹下的myfile.txt
语法：
①如果想删除所有后缀名为“.txt”的文件，在命令行输入“del *.txt”
②如果想删除所有后缀名为“.jpg”的文件，“del *.jpg”
注意：使用该命令删除的文件不会进入回收站
如果不想出现询问框，可以用del /s/p *.jpg

（5）文件与文件夹操作之移动-移动文件
命令：move 移动文件至新目录下
语法：move 文件1路径 新路径
案例（移动c盘下new文件夹下的c_file.txt文件至d盘下的new_file文件下）
文件移动可以跨驱动

（5）文件与文件夹操作之移动-移动文件夹
命令：move 移动文件夹至新目录下
语法：move 文件夹1路径 新路径
案例（移动c盘下new1文件夹至c盘下的new2文件夹内）
**注意：**文件夹移动不可以跨驱动→拒绝访问

（5）文件与文件夹操作之复制-复制文件
命令：xcopy可以把指定的目录连文件和目录结构一并拷贝，但不能拷贝隐藏文件和系统文件
语法：xcopy 文件路径1 文件路径2
案例：
将 C:\one\two文件夹下的东西复制到d:\one文件夹下
d:\one一定要打one,如果不打就会将one里的文件放在d:,会造成文件摆放乱.

（6）文件&目录操作之重命名-修改文件名或文件夹名字
命令：ren或rename可以改变文件名和文件夹（目录）名
语法：ren 文件名1 文件名2→将文件名1改为文件名2
案例1：
①将new_file底下的one文件夹更名为two
②将new_file底下的myfile.txt文件更名为new_myfile.txt

（7）展示类操作
①tree：以树形结构显示出目录
②type 文件名：显示文本文件的内容

（8）CMD相关操作
①cls：清空cmd窗口内容
②Ctrl+C：终止命令运行
③title 标题名字：更改CMD窗口标题名字

（9）系统快捷操作
①osk------------打开屏幕键盘
②mspaint--------画图板
③notepad--------打开记事本
④calc-----------启动计算器
⑤magnify--------放大镜实用程序（win键+【+/-】）
⑥taskmgr--------任务管理器
⑦write----------写字板

2.VUE工程化—node简介与环境搭建
核心思想
vue两大核心思想→组件化和数据驱动
（1）组件化就是将一个整体合理拆分为一个一个小块（组件），组件可重复使用
（2）数据驱动是前端的未来发展方向，释放了对DOM的操作，让DOM随着数据的变化自然而然的变化，不必过多的关注DOM，只需要关注数据层即可

工程化
Vue工程化项目需要用到脚手架工具vue-cli，类似于工人手里面的脚手架一样，帮助工人搭架子用，同样的vue脚手架工具也是帮助我们更好更快速的开发代码的工具。

环境需求
vue-cli是属于node的包，所以需要node去安装它，故在此之前应该先安装node。

首先介绍下Node.js
Node.js是一个JS运行环境(runtime environment)，不是一个js文件，实质是对Chrome V8引擎进行了封装。Node.js 是一个让 JS运行在服务端的开发平台，它让 JS成为与PHP、Python 等服务端语言平起平坐的脚本语言。
npm简介
在正式介绍Node.js学习之前，先认识一下npm。

（1）npm是什么东西？
npm其实是Node.js的包管理工具（node.js package manager）

（2）啥是包管理工具？为啥需要一个包管理工具？
因为在Node.js上开发时，会用到很多别人写的JS代码。如果要使用别人写的某个包，每次都根据名称搜索一下官方网站，下载代码，解压，再使用，非常繁琐。于是一个集中管理的工具应运而生：大家都把自己开发的模块打包后放到npm官网上，如果要使用，直接通过npm安装就可以直接用，不用管代码存在哪，应该从哪下载。
作用：方便开发，可以快速下载开发依赖（例如jQuery、boostrap、swiper）。
举个例子：
如果我们要使用模块A，而模块A又依赖于模块B，模块B又依赖于模块X和模块Y，npm可以根据依赖关系，把所有依赖的包都下载下来并管理起来。否则，靠我们自己手动管理，肯定既麻烦又容易出错。

比如之前的swiper开发，需要引入jquery类型文件，普通方案需要挨个引入，有了npm即nodejs的包管理工具后，它会自己根据文件依赖安装相应文件。
场景：
当一个网站依赖的js代码越来越多，程序员发现这是一件很麻烦的事情：
①去 jQuery 官网下载 jQuery
②去 BootStrap 官网下载 BootStrap
有些程序员就受不了了，于是npm就出来了，全称是 Node Package Manager 包管理工具。

NPM 的实现思路：
①有一个远程代码仓库（registry），在里面存放所有需要被共享的js代码（all所有），每个js文件都有自己唯一标识。
②用户想使用某个js的时候，只需引用对应的标识，js文件会自动下载下来，包含相关的依赖文件都会自动下载好（如bootstrap的js插件依赖jquery文件，利用npm下载时会根据两者依赖关系下载好）。
npm特性：根据依赖关系下载好相应的代码库

Node.js简介
介绍完npm包管理工具，接下来继续讲解node.js
①Node.js平台是在后端运行JS代码，可以把它理解成PHP和java同等的后台开发语言----MongoDB非关系型数据库。
②Node.js是一个基于Chrome JavaScript运行时建立的平台，非常适合开发数据密集型实时应用。

以上摘自百度百科，简单来说
Node.js很适合搭建数据密集型实时服务器应用，所以它又被称为服务器语言，前端中的后端语言。node翻译过来是节点的意思，而node.js后面特地带了.js，就表示它与JS有莫大的关系。 node.js是JS的一种运行环境，是服务器端的JS解释器。
chrome浏览器和Node.js在解析javascript都使用了v8引擎：
npm与node.js发展
npm与nodejs发展
npm作者已经将npm开发完成，于是发邮件通知 jQuery、Bootstrap作者，希望他们把 jquery、bootstrap 放到npm远程仓库，但是没有收到回应，于是npm的发展遇到了瓶颈。
Node.js作者后来也将Node.js开发完成，但是 Node.js 缺少一个包管理器，于是他和 npm 的作者一拍即合、抱团取暖，最终 Node.js 内置了 npm。
后来的事情大家都知道，Node.js 火了。随着 Node.js 的火爆，大家开始用 npm 来共享 JS 代码了，于是 jQuery 作者也将 jQuery 发布到 npm 了。所以现在，你可以使用 npm install jquery 来下载 jQuery 代码。
现在用 npm 来分享代码已经成了大前端的标配。

Node.js与npm安装
npm由于内置在node.js中，所以就一并安装了。
如果只想单独安装npm，不想安装node.js，这种做法目前不支持。

环境安装
（1）运行环境
安装nodejs：
node.js安装步骤→查看”node环境安装.docx”文件
（2）开发环境
推荐使用webstorm和HBuilder X等，支持vue语法

浅谈包管理工具npm与cnpm
NPM介绍：
（1）简介：NPM是NodeJS的包管理器，用于管理node相关依赖包（安装，卸载等）
（2）安装：npm install [-g]
（3）卸载：npm uninstall [ -g ]
（4）更新：npm update [ -g ]
（5）更新全部插件： npm update
（6）查看当前目录已安装插件：npm list [ -g ]

淘宝NPM镜像—CNPM

CNPM介绍：
（1）说明：
因为通过安装node插件是从国外服务器下载，受网络影响大，可能出现异常，如果服务器在中国就好了，所以乐于分享的淘宝团队干了这事。
（2）官方网址：http://npm.taobao.org
（3）安装：命令提示符执行
npm install cnpm -g --registry=https://registry.npm.taobao.org
（4）测试
输入cnpm -v或者cnpm --version检测版本及是否安装成功
注意：cnpm跟npm用法完全一致，只是在执行命令时将npm改为cnpm

总结
（1）cnpm淘宝镜像与npm用法相同，区别就是服务器的区别，npm服务器在境外，而cnpm(淘宝npm)服务器在境内，推荐使用cnpm。
（2）npm install - g中的install可以简写为i
（3）node --version可以简写为node -v
（4）npm --version可以简写为npm-v
（5）cnpm -v

Node环境安装
（1）Windows安装Node.js
登录node官网（https://nodejs.org/en/）可以看到各种平台node版本下载。

本节主要讲解下windows平台安装node.js
安装方式有两种Windows 安装包(.msi)和Windows 二进制文件 (.exe)安装。
1、Windows 安装包(.msi)
32 位安装包下载地址 : https://nodejs.org/dist/v4.4.3/node-v4.4.3-x86.msi
64 位安装包下载地址 : https://nodejs.org/dist/v4.4.3/node-v4.4.3-x64.msi
如何查看计算机系统类型？

①选择对应的安装包点击下载
②双击下载好的安装包

③点击以上的Run(运行)，将出现如下界面

④勾选接受协议选项，点击 next（下一步） 按钮 :

⑤Node.js默认安装目录为 “C:\Program Files\nodejs” , 你也可以修改目录，不推荐放到C盘，例如本次安装到D盘nodejs文件夹下，点击 next（下一步）：

⑥点击树形图标来查看模式 默认安装以下四项, 然后点击下一步 next（下一步）

⑦点击Install（安装）开始安装Node.js。也可以点击 Back返回来修改先前的配置。然后点击 next（下一步）：

⑧安装过程
⑨点击 Finish（完成）按钮退出安装向导

⑩查看版本
进入node文件夹，查看node及npm版本
1、检测node版本
CMD=>输入指令node --version或者node -v

2、检测npm版本
CMD=>输入指令npm --version或者npm -v
显示npm版本说明node.js自带的npm已经安装成功。Node.js已自带npm，安装Node.js时会一起安装，npm的作用就是对Node.js依赖的包进行管理，也可以理解为用来安装/卸载Node.js需要装的东西
3、检测环境变量
检测path环境变量是否配置了Node.js，打开cmd => 输入命令"path"，输出如下结果：
2.Windows 二进制文件 (.exe)安装
32 位安装包下载地址 : http://nodejs.org/dist/v0.10.26/node.exe
64 位安装包下载地址 : http://nodejs.org/dist/v0.10.26/x64/node.exe
（1）双击下载的安装包 Node.exe 出现如下界面 :

（2）点击 Run（运行）按钮将出现命令行窗口：

（3）版本测试
进入 node.exe 所在的目录，如下所示：

若获得以上结果，说明已经成功安装了Node.js。
（2）配置环境
安装完成后的目录如下所示

这里的环境配置主要配置的是npm安装的全局模块所在的路径，以及缓存cache的路径，之所以要配置，是因为以后在执行类似：npm install express [-g] （后面的可选参数-g，g代表global全局安装的意思）的安装语句时，会将安装的模块安装到当前跟盘路径中，容易造成混乱（比如nodejs放到了D盘，当前在E盘操作则会下载到E盘，下次在C盘操作又会下载到C盘，容易造成混淆）。
例如：我希望将全模块所在路径和缓存路径放在node.js安装的文件夹中，则在安装的文件夹【D:\nodejs】下创建两个文件夹【node_global】及【node_cache】如下图：
（1）创建文件夹

1、node_global为npm安装的全局模块所在的路径
2、node_cache缓存cache的路径
（2）cmd添加配置
创建完两个空文件夹之后，打开cmd命令窗口，输入
npm config set prefix “D:\nodejs\node_global”
npm config set cache “D:\nodejs\node_cache”

（3）设置环境变量
关闭cmd窗口，“我的电脑”-右键-“属性”-“高级系统设置”-“高级”-“环境变量”

①系统变量：进入环境变量对话框，在系统变量下新建NODE_PATH，输入D:\nodejs\node_global\node_modules
②用户变量：将用户变量下的Path修改为D:\nodejs\node_global

（4）测试
配置完后，安装个module模块测试下，安装个最常用的express模块，打开cmd窗口
使用npm安装个模块测试下，npm 安装 Node.js 模块语法格式如下：
npm install
接下来使用npm命令安装常用的 Node.js 的web框架模块 express，输入如下命令进行模块的全局安装：
npm install express -g # -g是全局安装的意思global

特别说明：如果安装时不加-g参数，则模块就会安装到当前路径下。拿上面的express模块举例，如果不加参数-g，则会将express模块下载到当前目录下的node_modules文件夹里，即使文件夹不存在也会自动生成。

（3）配置淘宝NPM镜像—淘宝镜像cnpm
由于npm服务器在国外，所以每次下载速度都会受到限制，且由于防火墙拦截，可能经常性丢失下载文件，出现各种报错。所以这里推荐使用国内淘宝NPM镜像
淘宝 NPM 镜像是一个完整镜像，同步频率目前为 10分钟一次以保证尽量与官方服务同步。
1、在安装时可以手动指定从哪个镜像服务器获取资源，可以使用阿里巴巴在国内的镜像服务器，命令如下：
npm install -gd express --registry=http://registry.npm.taobao.org
只需要使用–registry参数指定镜像服务器地址，为了避免每次安装都需要–registry参数，可以使用如下命令进 行永久设置：
npm config set registry http://registry.npm.taobao.org
2、此外可以使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm:
npm install -g cnpm --registry=https://registry.npm.taobao.org
这样就可以使用 cnpm 命令来安装模块了：
cnpm install [name]

常遇问题：
①卸载后，第二次安装，无法安装问题（这里需要运行UninstallNode.js正常卸载node才能重装）