最新Vue windows环境搭建与问题解决——写出你的Vue “Hello World”

前端学习，在Windows下搭建Vue开发环境：

1. 安装node.js

• Node官网下载

• 直接下载
  
  
  
  
  
  

一路Next即可，不过记住安装位置，默认路径为：

C:\Program Files\nodejs

检验是否安装成功：
命令行输入：

node -v
npm -v

如果安装成功会输出相应版本号：

报错问题：

1. win10下安装node之后，node -v正常，npm -v报错，如下：

npm WARN logfile could not create logs-dir: Error: EPERM: operation not permitted, mkdir 'C:\Program Files\nodejs\node_cache\_logs'

原因：node目录权限不够；
解决办法：找到node安装目录，右键属性，点击安全，设置users用户完全控制权限，如下图。

2. node -v正常，npm -v无反应，如下

原因：输入命令 npm config set prefix 或者其他命令输入后导致npm -v完全没反应，因为使用其他命令使npm的config乱掉了；
解决方法：将"C:\Users\用户.npmrc" 文件如图修改一下，或者删除再进行之后的操作，注意此用户为你的电脑那个。
这里要注意，不是nodejs安装目录npm模块下的那个npmrc文件，而是在C:\Users\用户\ 下的.npmrc文件：
有误的修改和第二行格式一致：

正确的：

3. 输入cnpm install vue –g
   ‘cnpm’ 不是内部或外部命令，也不是可运行的程序
   或批处理文件。

2. 设置node的全局和缓存路径

在安装目录下新建两个文件夹：node_cache、node_global，如图：
然后CMD命令行输入，或者直接手动修改上面文件，修改成自己的路径
设置缓存路径，注意路径为你安装的实际路径：

npm config set cache “C:\Program Files\nodejs\node_cache”

设置全局模块存放路径：

npm config set prefix “C:\Program Files\nodejs\node_global”

不报错即可：

3. 安装淘宝镜像

CMD输入：

npm install -g cnpm --registry=https://registry.npm.taobao.org

4. 设置环境变量

设置环境变量的目的是在任何目录都可以执行node和vue命令，注意均为你的安装目录。
PATH增加

C:\Program Files\nodejs\node_global

新建NODE_PATH，值：

C:\program\nodejs\node_modules

5. 安装Vue

需要先关上命令行窗口，再次打开CMD，执行安装vue命令：

cnpm install vue –g

6. 安装Vue-cli脚手架

cnpm install -g vue@cli

报错，执行如下命令：

npm i npm -g

然后再执行：

npm i @vue/cli -g

cnpm i @vue/cli -g

OK！
如果此时node -v正常，npm -v无反应，请看1.中的问题2.

7. 创建一个Vue项目

找一个自己喜欢的目录下CMD执行：

vue create first

按着提示输入命令：

cd first
npm run serve

加载一会就出来了拉：

crtl + 点击http://localhost:8080/本机浏览器就可以打开了。
效果如图：

记录一下自己运行的第一个Vue项目吧，虽然只是一个“Hello World”,嘻嘻嘻.

参考资料：手把手教你在Windows下搭建Vue开发环境
npm问题：在命令函或者终端中输入npm -v 没有反应【已解决】