nvm node npm webpack vue-cli 安装流程

Windows上安装nodejs版本管理器nvm

Node版本管理器--nvm，可以运行在多种操作系统上。nvm for windows 是使用go语言编写的软件。 我电脑使用的是Windows操作系统，所以我要记录下在此操作系统上nvm的安装和使用。

下载

nvm-windows 最新下载地址：
https://github.com/coreybutler/nvm-windows/releases
如图所示：

我目前看到有两个版本【Pre-release 1.1.6】和 【Latest release 1.1.5]，我们下载目前稳定版本1.1.5就可以了。1.1.6版本是最新版本，可能还不是很稳定。
而这里又有四个可下载的文件。

• nvm-noinstall.zip： 这个是绿色免安装版本，但是使用之前需要配置
• nvm-setup.zip：这是一个安装包，下载之后点击安装，无需配置就可以使用，方便。
• Source code(zip)：zip压缩的源码
• Sourc code(tar.gz)：tar.gz的源码，一般用于*nix系统

我对这个目前只是简单使用，为了方便，所以下载了nvm-set.zip文件。

安装之前的操作

请注意： 在安装nvm for windows之前，你需要卸载任何现有版本的node.js。并且需要删除现有的nodejs安装目录（例如："C:\Program Files\nodejs’）。因为，nvm生成的symlink（符号链接/超链接)不会覆盖现有的（甚至是空的）安装目录。

你还需要删除现有的npm安装位置（例如“C:\Users\weiqinl\AppData\Roaming\npm”），以便正确使用nvm安装位置。

安装

以上操作完成之后，双击执行下载的setup文件,出现安装框，如下图：

Next之后，选择同意协议，之后选择nvm的本地安装目录，这里注意，nvm的安装路径名称中最好不要有空格。

例如最好不要这样有空格的~\Program Files\nvm，我这里选择的是D:\dev\nvm。

点击Next，跳转到设置 Node.js的Symlink，即需要设置nodejs的快捷方式存放的目录,

我这里选择的是D:\dev\nodejs。

之后，点击Next-->Install-->Finish完成本次安装。

配置淘宝镜像和环境变量,这样下载速度会更快。

根目录有一个settings.txt的文本文件，打开这个文件，修改配置内容，配置淘宝镜像。

  root: C:\dev\nvm          /* nvm 的安装路径 */  path: C:\dev\nodejs       /* nodejs快捷方式的路径 */
  arch: 64                  /* 操作系统位数 */
  proxy: none                 /* none */
  node_mirror: http://npm.taobao.org/mirrors/node/     /* 淘宝镜像 */
  npm_mirror: https://npm.taobao.org/mirrors/npm/        /* 淘宝镜像 *//* 注意：node 是http开头  npm 是https开头*/

检测

检查是否安装成功，我们可以在新的命令窗口中输入

nvm

• 如果出现nvm版本号和一系列帮助指令，则说明nvm安装成功。
• 否则，可能会提示nvm: command not found

升级

如果要升级的话，请重新下载最新的安装程序。并直接运行安装程序。它将安全的覆盖需要更新的文件，而无需关心nodejs的安装。
此次安装需要确保和上次使用相同的安装目录。

如果你最初安装到默认位置，则只需一直点击"下一步"，直到完成。

使用

nvm for windows是一个命令行工具，在控制台输入nvm,就可以看到它的命令用法。基本命令有：

• nvm arch [32|64] ： 显示node是运行在32位还是64位模式。指定32或64来覆盖默认体系结构。
• nvm install [arch]： 该可以是node.js版本或最新稳定版本latest。（可选[arch]）指定安装32位或64位版本（默认为系统arch）。设置[arch]为all以安装32和64位版本。在命令后面添加--insecure ，可以绕过远端下载服务器的SSL验证。
• nvm list [available]： 列出已经安装的node.js版本。可选的available，显示可下载版本的部分列表。这个命令可以简写为nvm ls [available]。
• nvm on： 启用node.js版本管理。
• nvm off： 禁用node.js版本管理(不卸载任何东西)
• nvm proxy [url]： 设置用于下载的代理。留[url]空白，以查看当前的代理。设置[url]为none删除代理。
• nvm node_mirror [url]：设置node镜像，默认为https://nodejs.org/dist/.。我建议设置为淘宝的镜像https://npm.taobao.org/mirrors/node/
• nvm npm_mirror [url]：设置npm镜像，默认为https://github.com/npm/npm/archive/。我建议设置为淘宝的镜像https://npm.taobao.org/mirrors/npm/
• nvm uninstall ： 卸载指定版本的nodejs。
• nvm use [version] [arch]： 切换到使用指定的nodejs版本。可以指定32/64位[arch]。nvm use 将继续使用所选版本，但根据提供的值切换到32/64位模式的
• nvm root [path]： 设置 nvm 存储node.js不同版本的目录 ,如果未设置，将使用当前目录。
• nvm version： 显示当前运行的nvm版本，可以简写为nvm v

一个nodejs的安装使用流程：

    推荐 8.9.3 版本

nvm ls   // 查看目前已经安装的版本
nvm install 8.9.3  // 安装指定的版本的nodejs
nvm use 8.9.3  // 使用指定版本的nodejs

• 然后我们开始配置环境变量了，在环境变量的系统变量中，生成两个环境变量：NVM_HOME 和 NVM_SYMLINK 

• 我们开始修改这两个变量名的变量值：NVM_HOME的变量值为：C:\dev\nvm； NVM_SYMLINK的变量值为：C:\dev\nodejs

• 看一下在Path中有没有 C:\dev\nvm;或者是C:\dev\nodejs，如果有的话，把他们删掉，没有的话更好，我们自己来配置，在Path的最前面输入： ;%NVM_HOME%;%NVM_SYMLINK%;
  

• 打开一个cmd窗口输入命令：nvm v ，那么我们会看到当前nvm的版本信息。我们就可以安装nodejs了。

nvm常用命令

• nvm install ## 安装指定版本，可模糊安装，如：安装v6.2.0，既可nvm install v6.2.0，又可nvm install 6.2

• nvm uninstall ## 删除已安装的指定版本，语法与install类似

• nvm use ## 切换使用指定的版本node

• nvm ls ## 列出所有安装的版本

• nvm ls-remote ## 列出所以远程服务器的版本（官方node version list）

• nvm current ## 显示当前的版本

• nvm alias ## 给不同的版本号添加别名

• nvm unalias ## 删除已定义的别名

• nvm reinstall-packages ## 在当前版本node环境下，重新全局安装指定版本号的npm包

npm: Nodejs下的包管理器。node内置npm ，所以安装好node, 也就有npm了。

这时在 命令行窗口输入  

node -v 或者 npm -v 

如果有显示版本号，则说明安装成功了。如下图：

此时 需要配置下 NPM 的一些配置 ，npm config ls 可以查看配置列表。

npm config set registry=https://registry.npm.taobao.org 配置镜像站 

注意：此处地址一定要是 https 开头，如果是 http 开头，npm 会很慢卡住。

npm config set prefix "D:\···自己的安装路径\nodejs\node_global"  配置全局安装路径

npm config set cache "D:\···自己的安装路径\nodejs\node_cache"  配置缓存的路径

配置完成后，再使用 npm config ls 查看一下配置列表，确认是配置成功。

全局安装vue-cli，在cmd中输入命令:

npm install --global vue-cli 或者 npm install -g vue-cli 或者 npm install -g @vue/cli

（我已经安装过，为了更直观我在电脑上重新演示下）

安装成功：

安装完成之后输入 vue -V（注意这里是大写的“V”），如下图，如果出现相应的版本号，则说明安装成功。

安装 webpack 

npm install -g webpack webpack-cli

输入 webpack 可以显示版本号，证明成功

用vue-cli来构建项目

① 我首先在D盘新建一个文件夹（demo）作为项目存放地，然后使用命令行cd进入到项目目录输入：

vue init webpack demo // demo是自定义名称

demo是自定义的项目名称，命令执行之后，会在当前目录生成一个以该名称命名的项目文件夹。

进入项目目录，npm run dev 启动项目