Node.js+Vue.js 安装

• win7安装node.js
• npm失效(以前管用现在不管用,按装完就不管用的,自己搜配置环境)

---

前言

昨天下载安装了node.js,并且用npm安装了vue,然后电脑重启了一下,npm就不管用了,查了资料就是要重装,然后查很多资料,发现写的都有瑕疵,这玩意弄错一步说不定就像我昨天那样,重启个屁,所以这里结合我查的五六篇文章,写一篇新的文章.给自己留着备份一下,顺便给啥都不会的0基础小白分享一下,写的不好的话别吭气,写的好的话也不用感谢

---

提示：以下是本篇文章正文内容

一、Node.Js的删除

• 这里没啥好说的,就是360软件管家删除,或者程序管理工具删除,或者直接删除安装路径
  唯一需要注意的地方,以上各种方式删除都需要注意:
• 需要额外删除C:\Users\Administrator\AppData\Roaming下的npm文件夹
  (没有的如果没按照下文set指定位置,自己再找找,反正在C盘,自己设置了忘了全局搜索)
  如图（示例）：
  

二、安装:去官网下载安装包

1.win10

• https://nodejs.org/en/download/
  如图（示例）：下载哪个就不说了,自己搜
  

2.win7

• PS:如果是win7,需要去下载历史版本(听说是14版本以后的win7不能用,没有试过):
  https://nodejs.org/dist/v13.14.0/
  如图（示例）：下载.msi结尾的
  

3.别的系统自己搜

4.测试

如图（示例）：

三、配置环境变量

1.先配置npm的全局模块的存放路径以及缓存的路径

• 例如希望将以上两个文件夹放在NodeJS的主目录下，便在NodeJs下建立"node_global"及"node_cache"两个文件夹。
  如图（示例）：
  
  然后打开命令(cmd)输入

• npm config set prefix “H:\nodejs\node_global”

• npm config set cache “H:\nodejs\node_cache”

• 如果不进行这一步设置，npm的全局安装包，将不会在node安装文件夹里。

• 如果这个步骤出现错误，如：operation not permitted, mkdir ‘C:\Program Files\nodejs’，请使用管理员身份打开cmd命令行。

2.配置node_path

• 点击环境变量弹出的对话框，选中用户变量中的PATH，点击编辑，然后把C:…\npm改为nodejs\node_global的地址
  如图（示例）：

• 在系统变量下新建"NODE_PATH"，输入”xxx:…\nodejs\node_global\node_modules“。(这里我觉得怪怪的,所以我删了以后又测试了一下,一切正常)
  如图（示例）：
  
• 系统变量中的Path不用动

四、下载淘宝镜像

• 打开windows命令窗口，输入“npm install -g cnpm --registry=https://registry.npm.taobao.org”命令安装
• npm安装插件是从国外服务器上获取的，国内使用会出现下载速度较慢，下载失败等问题，因此使用npm的国内镜像cnpm
  如图（示例）：
  
• 然后输入cnpm -v 查询是否安装成功
  如图（示例）：
  

五、用cnmp安装vue

1.安装Vue

cnpm install vue -g
如图（示例）：这里引用的别人的图片

2.安装vue命令行工具，即vue-cli 脚手架

cnpm install vue-cli -g
如图（示例）：这里引用的别人的图片

3.新项目的创建

• 打开存放新建项目的文件夹
  shift+鼠标右键:在此次打开命令窗口

• 根据模版创建新项目
  vue init webpack edutrainvue(edutrainvue是项目名称,可以换别的)
  如图（示例）：这里引用的别人的图片
  
  
  

• 图片点开放大,找对应的命令
  注意点:这三张图片的第一站,找yes对应的提示语句,是与需要你手输y,第一个yes之上的,回车就行(需要按好几次,逐行对照就行)

• 初始化完成

• 安装工程依赖模块
  定位到mytest的工程目录下，安装该工程依赖的模块，这些模块将被安装在：edutrainvue\node_module目录下，node_module文件夹会被新建，而且根据package.json的配置下载该项目的modules
  cd edutrainvue
  cnpm install
  (如果你是一直回车没乱动的话,应该是如这三张图的第三张一样,看那最后面两行黄色的字,cd edutrainvue,npm run dev,不需要cnpm install)

• 运行该项目，测试一下该项目是否能够正常工作，这种方式是用nodejs来启动。
  cnpm run dev
  如图（示例）：这里引用的别人的图片
  
  进入浏览器打开对应网址和端口
  如图（示例）：这里引用的别人的图片
  

• Ctrl+C 退出

• npm run build 打包
  

• 项目目录
  

---

总结

以上就是本文要讲的内容,主要目的是为了给自己留着备份一下,顺便给啥都不会的0基础小白分享一下,写的不好的话别吭气,写的好的话也不用感谢