一  
  
  
  
  
  、nvm与vue介绍

nvm 全称为 node.js version management            ，顾名思义是用于管理多个 nodejs 的版本控制工具  
  
  
  
  
  。通过它可以安装和切换不同版本的 nodejs, 主要是为了解决 node.js各种版本存在不兼容现象 
  
  
  
  
  
。

Vue是一个渐进式（声明式渲染——组件系统——客户端路由——-大数据状态管理——-构建工具）的js框架 
 
  
 
  
 
  
 
  
 
  
 ，与其他重量级框架不同的是










，Vue 采用自底向上增量开发的设计
  
  
  
  
  
 ，并且有很好的生态系统


 


 


 


 


 

。具有体积小 
  
  
  
  
  ，速度快 


 


 


 


 


 

，兼容性强等优点 
 
 
 
 
 。

二 
  
  
  
  
  
、nvm的安装与配置

1.下载nvm安装包

直接在官网下载即可：nvm下载地址

安装包需要去GitHub网站进行下载
 
 
 
 
 
，而因为某些特殊原因  
   
   
   
   
   ，GitHub会出现登录不上或者网速非常慢的情况 

 

 

 

 

 
，此时有以下几种处理方式供大家参考 (1)


 


 


 


 


 

、手动修改hosts文件

这种方案的原理就是：绕过 DNS 解析

 

 

 

 

 

，直接用本地的 DNS 记录进行跳转  
   
   
   
   
   
。

hosts文件地址：C:\Windows\System32\drivers\etc\hosts

查询github的DNS

选择 TTL 和响应时间都比较小的两个响应 IP

我这里选择了140.82.121.4和140.82.121.3

最终我们得到了如下配置（前面的IP换成你自己的）

140.82.121.4 github.com

140.82.121.3 github.com

配置完毕后需要刷新DNS缓存

win+R打开运行窗口,输入cmd,点击确定

输入命令：ipconfig /flushdns

完成以上操作后基本上就可以正常浏览github了 (2) 
 
 
 
 
 、工具自动更新hosts

通过SwitchHosts工具自动更新hosts文件

switchhosts是管理/快速切换hosts的小工具           ，是开源软件 
 

 
 

 
 

 
 

 
 

 
 ，一键就可以切换hosts；

下载SwitchHosts软件

下载之后直接无脑安装











，很简单                ，然后就可以配置你自己需要的（github的配置这个：https://raw.hellogithub.com/hosts）

至此 
 
 
 
 
 
 
 
 
 
 
 ，基本上登录Github下载nvm安装包就没有问题了！！！接下来言归正传
















，继续我们的nvm安装

nvm-setup.zip：安装版           ，推荐使用 nvm-noinstall.zip: 绿色免安装版 
 
  
 
  
 
  
 
  
 
  
 ，但使用时需进行配置

 

 

 

 

 
。 2.安装nvm

安装基本上就没有什么好说的了










，傻瓜式无脑装

1.双击安装文件 nvm-setup.exe

2.设置nvm路径

3.设置nodejs路径
  
  
  
  
  
 ，这步最好选择你之前安装过 nodejs的目录

4.确认安装

5.这一步是因为你之前安装过nodejs并且之前的还在 
  
  
  
  
  ，问你是否要将之前的添加到nvm的版本控制中去 


 


 


 


 


 

，一般选择是

6.安装完成

7.验证是否安装成功

nvm version：出现版本号就是安装成功了

常用命令

nvm version ： nvm 版本
 
 
 
 
 
，version 可直接写成 v

nvm arch：显示node运行在32位还是64位

nvm on ：开启 node.js 版本管理

nvm off ：关闭 node.js 版本管理

nvm list ： 已安装的列表  
   
   
   
   
   ，list可简化为ls

nvm list available： 可安装的列表 

 

 

 

 

 
，list可简化为ls

nvm uninstall [version] ：卸载指定版本 node

nvm use [version] ：使用指定版本 node 3.配置路径和淘宝镜像

在 nvm 的安装路径下

 

 

 

 

 

，找到 settings.txt           ，在后面加上这两行 
 

 
 

 
 

 
 

 
 

 
 ，设置国内镜像源：

node_mirror: https://npm.taobao.org/mirrors/node/

npm_mirror: https://npm.taobao.org/mirrors/npm/

三  
   
   
   
   
   
、Node的安装与配置

1.nvm安装node

(1)打开cmd控制台











，输入命令查看可安装版本列表                ，

nvm ls available

(2)选择要下载的node版本

CURRENT：为当前最新的版本

LTS：为稳定版本

OLD：历史版本

建议选择LTS稳定版的 nvm install 19.1.0

(3)查看已安装的node版本

(4)选择要使用的node版本

nvm use 19.1.0

2.配置node环境变量 设置路径：此电脑->属性->高级程序设置->高级->环境变量 如果你的系统变量和用户变量中已经有了如下配置(home和symlink可能会自动配置上 
 
 
 
 
 
 
 
 
 
 
 ，path这个可以先配置上
















，后续会手动新建这个文件夹)： NVM_HOME NVM_SYMLINK NODE_PATH：这个需要自己配置

配置完成后           ，输入以下命令进行验证：

node -v (查看node版本 
 
  
 
  
 
  
 
  
 
  
 ，若返回版本号










，node可用) npm -v (查看npm版本
  
  
  
  
  
 ，若返回版本号 
  
  
  
  
  ，npm可用) 如果返回了相应的版本号 


 


 


 


 


 

，则证明成功
 

 

 

 

 

 。 3.配置NodeJS的prefix（全局路径）和cache（缓存路径）

这部分如果不改
 
 
 
 
 
，则在安装nodejs后  
   
   
   
   
   ，默认下载的全局模块是安装到：{%USERDATA%}C:\Users\username\AppData\下的Roaming\npm

(1)选择需要使用的版本 

 

 

 

 

 
，新建两个文件夹

node_global node_cache

(2)设置全局模板和缓存文件的存放路径：

npm config set cache “F:\Project\nvm\nodejs\node_cache  
  
  
  
  
  ” npm config set prefix “F:\Project\nvm\nodejs\node_global 
  
  
  
  
  
”

注意！！！前边如果已经在系统环境中设置过了 NODE_PATH 的就可以跳过继续往下进行

 

 

 

 

 

，如果没设置的请返回第2步进行Node设置！！！

四

 

 

 

 

 
、Vue的安装与项目初始化

1.安装vue
 

 

 

 

 

 、webpack           、vue-cli

npm install vue -g npm install webpack -g npm install vue-cli -g npm install vue-router -g 这些命令中的 -g 是指全局安装           ，指安装到global全局目录 
 

 
 

 
 

 
 

 
 

 
 ，这块最容易出现的问题就是权限问题

碰到这个问题就先试着把cmd用管理员权限运行











，如果还是不行就把出问题的文件夹的角色权限都勾选一下

这些脚手架都安装完毕之后                ，执行一下命令验证下是否安装成功

vue --version webpack -v

此时打开我们刚才新建的global文件夹 
 
 
 
 
 
 
 
 
 
 
 ，发现安装的模块统一都在这里

2.初始化项目 vue init webpack 项目名 1. Project name vue-demo 　　　　　　　　　　// 项目名称 2. Project description A Vue.js project 　　// 项目描述 3. Author XXX 　　　　　　　　　　　　　　 // 作者 4. Vue build standalone 　　　　　　　　　 // 打包方式
















，默认           ，直接回车 5. Install vue-router? Yes　　　　　　　　　 // 是否安装 vue-router 
 
  
 
  
 
  
 
  
 
  
 ，路由










，选(Y) 6. Use ESLint to lint your code? No 　 // 是否安装 eslint管理代码
  
  
  
  
  
 ，不推荐 
  
  
  
  
  ，选(N) 7. Setup unit tests with Karma + Mocha? No // 是否安装Karma + Mocha 单元测试工具 


 


 


 


 


 

，选（N） 8. Setup e2e tests with Nightwatch? No　　　// 是否安装e2e端到端测试工具
 
 
 
 
 
，选（N） cd 项目名         //进行手动初始化

npm run dev 　// 开始运行项目！

npm run dev 之后  
   
   
   
   
   ，默认的端口为 8080  

 

 

 

 

 
，使用浏览器打开 http://localhost:8080 就可以打开项目初始化后的默认模板页面了

 

 

 

 

 

，至此           ，项目算是创建成功

最后看下忙忙碌碌的成果吧！！！

总结

在进行工具的配置及使用时 
 

 
 

 
 

 
 

 
 

 
 ，不可能是一帆风顺的











，如果真的一帆风顺了                ，那也只是偶然 
 
 
 
 
 
 
 
 
 
 
 ，说这些只是想要告诉自己和看到这句话的朋友：在顺境来临时
















，一定要学会自我控制           ，因为大喜易失察 
 
  
 
  
 
  
 
  
 
  
 ，太得意会让错误乘虚而入           。当然在逆境来临时










，也不要太有压力
  
  
  
  
  
 ，因为所有的逆境都只是暂时的 
  
  
  
  
  ，总会有方法应对
 

 
 

 
 

 
 

 
 

 
 
。

加油！共勉！！！