nvm(Vue)安装与配置保姆级教程

一、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的DNSnvm(Vue)安装与配置保姆级教程_第1张图片
选择 TTL 和响应时间都比较小的两个响应 IPnvm(Vue)安装与配置保姆级教程_第2张图片
我这里选择了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软件nvm(Vue)安装与配置保姆级教程_第3张图片
下载之后直接无脑安装,很简单,然后就可以配置你自己需要的(github的配置这个:https://raw.hellogithub.com/hosts)nvm(Vue)安装与配置保姆级教程_第4张图片

至此,基本上登录Github下载nvm安装包就没有问题了!!!接下来言归正传,继续我们的nvm安装

  • nvm-setup.zip:安装版,推荐使用
  • nvm-noinstall.zip: 绿色免安装版,但使用时需进行配置。nvm(Vue)安装与配置保姆级教程_第5张图片
2.安装nvm

安装基本上就没有什么好说的了,傻瓜式无脑装
1.双击安装文件 nvm-setup.exe
nvm(Vue)安装与配置保姆级教程_第6张图片
2.设置nvm路径
nvm(Vue)安装与配置保姆级教程_第7张图片
3.设置nodejs路径,这步最好选择你之前安装过 nodejs的目录
nvm(Vue)安装与配置保姆级教程_第8张图片
4.确认安装
nvm(Vue)安装与配置保姆级教程_第9张图片
5.这一步是因为你之前安装过nodejs并且之前的还在,问你是否要将之前的添加到nvm的版本控制中去,一般选择是
nvm(Vue)安装与配置保姆级教程_第10张图片
6.安装完成
nvm(Vue)安装与配置保姆级教程_第11张图片
7.验证是否安装成功
nvm version:出现版本号就是安装成功了
nvm(Vue)安装与配置保姆级教程_第12张图片

常用命令

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 availablenvm(Vue)安装与配置保姆级教程_第13张图片

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

CURRENT:为当前最新的版本
LTS:为稳定版本
OLD:历史版本
建议选择LTS稳定版的

nvm install 19.1.0

nvm(Vue)安装与配置保姆级教程_第14张图片

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

nvm(Vue)安装与配置保姆级教程_第15张图片

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

nvm use 19.1.0nvm(Vue)安装与配置保姆级教程_第16张图片

2.配置node环境变量
  • 设置路径:此电脑->属性->高级程序设置->高级->环境变量
  • 如果你的系统变量和用户变量中已经有了如下配置(home和symlink可能会自动配置上,path这个可以先配置上,后续会手动新建这个文件夹):
    • NVM_HOME
    • NVM_SYMLINK
    • NODE_PATH:这个需要自己配置nvm(Vue)安装与配置保姆级教程_第17张图片
      nvm(Vue)安装与配置保姆级教程_第18张图片

配置完成后,输入以下命令进行验证:
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
    nvm(Vue)安装与配置保姆级教程_第19张图片
    nvm(Vue)安装与配置保姆级教程_第20张图片
    (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全局目录,这块最容易出现的问题就是权限问题nvm(Vue)安装与配置保姆级教程_第21张图片


碰到这个问题就先试着把cmd用管理员权限运行,如果还是不行就把出问题的文件夹的角色权限都勾选一下nvm(Vue)安装与配置保姆级教程_第22张图片

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

vue --version
webpack -v

此时打开我们刚才新建的global文件夹,发现安装的模块统一都在这里nvm(Vue)安装与配置保姆级教程_第23张图片

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 就可以打开项目初始化后的默认模板页面了,至此,项目算是创建成功

最后看下忙忙碌碌的成果吧!!!nvm(Vue)安装与配置保姆级教程_第24张图片

总结

在进行工具的配置及使用时,不可能是一帆风顺的,如果真的一帆风顺了,那也只是偶然,说这些只是想要告诉自己和看到这句话的朋友:在顺境来临时,一定要学会自我控制,因为大喜易失察,太得意会让错误乘虚而入。当然在逆境来临时,也不要太有压力,因为所有的逆境都只是暂时的,总会有方法应对。

加油!共勉!!!

你可能感兴趣的:(工具使用,nvm,vue,vue.js,前端,javascript,npm,GitHub,idea)