Node.js下载安装及环境配置+vue配置

一、官网下载
二、安装程序
三、环境配置
四、测试
五、安装淘宝镜像
六、安装vue及脚手架
七、VS Code + Vue
- 1.在VS code中启动项目

一、官网下载

https://nodejs.org/zh-cn/download/

选择对应你系统的Node.js版本，这里我选择的是Windows系统、64位

二、安装程序

（1）下载完成后，双击安装包，开始安装Node.js

（2）直接点【Next】按钮，此处可根据个人需求修改安装路径，修改完毕后继续点击【Next】按钮

（3）可根据自身需求进行，此处我选择默认安装，继续点击【Next】按钮

（4）不选中，直接点击【Next】按钮

（5）点击【Install】按钮进行安装

（6）安装完毕，点击【Finish】按钮

（7）测试安装是否成功，按下【win+R】键，输入cmd，打开cmd窗口

 输入：node -v     // 显示node.js版本
       npm -v      // 显示npm版本

成功显示版本说明安装成功

三、环境配置

（1）找到安装的目录，在安装目录下新建两个文件夹【node_global】和【node_cache】

（2）创建完毕后，使用管理员身份打开cmd命令窗口（打开方法见下方Tips），输入

npm config set prefix “你的路径\node_global” （复制你刚刚创建的“node_global”文件夹路径）

npm config set prefix "D:\develop\Node.js\node_global"

②npm config set cache “你的路径\node_cache” （复制你刚刚创建的“node_cache”文件夹路径）

npm config set cache "D:\develop\Node.js\node_cache"

出现问题：

在设置Node.js 全局模块所在的路径的时候，因为路径错误，导致设置失败
大概如下：

npm config set prefix "E:****\node_global"
1

报错：

Error: ENOENT: no such file or directory, mkdir ‘E:’

但是我修改成正确的路径后，再次执行相关命令，还是失败。

解决

是C:\Users\Administrator目录（当前用户的home路径）下的.npmrc里的配置问题。

找到并打开上面的.npmrc文件，你就会发现里面的 prefix= 后面还是之前错误的路径。

解决：

手动修改成正确的路径，然后保存，再去执行命令，执行成功，解决。

原文链接：https://blog.csdn.net/u014163312/article/details/116105767

Tips: 使用管理员身份运行cmd的方法：点击左下角【开始】菜单，在搜索区域输入“命令提示符”，然后点击【以管理员身份运行】

=或单击鼠标右键选择【以管理员身份运行】============

（3）配置环境变量

1）【此电脑】-单击右键-【属性】-【高级系统设置】-【环境变量】

2）在【系统变量】中点击【新建】

变量名：NODE_PATH

变量值：C:\Program Files\nodejs\node_global\node_modules

然后你就会发现【node_global】里多出了一个【node_modules】文件夹

Tips:如果输入变量值之后没有自动创建【node_modules】文件夹，就在【node_global】下手动创建一个【node_modules】文件夹，再复制你创建的【node_modules】文件夹的路径地址到变量值

3）编辑【用户变量】中的【Path】

4）将默认的 C 盘下【 AppData\Roaming\npm 】修改成【node_global】的路径，点击确定

5）在【系统变量】中选择【Path】点击【编辑】添加【NODE_PATH】，随后一直点击【确定】

四、测试

配置完成后，全局安装一个最常用的 express 模块进行测试

npm install express -g // -g代表全局安装

出现以下界面即为配置成功：

Tips：如果出现安装失败的话可能是你没有使用管理员身份运行cmd窗口，或者可以修改一下【node_global】和【node_cache]的权限

步骤：鼠标右击【node_global】的文件夹，点击【属性】，再点击【安全】，再点击【编辑】，将权限都勾上，随即点击【确定】即可，【node_cache】步骤同理。

五、安装淘宝镜像

1）安装淘宝镜像

npm config set registry https://registry.npm.taobao.org

查看是否成功：

npm config get registry

2）安装cnpm（按需安装）

说明： npm是node官方的包管理器。cnpm是个中国版的npm，是淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm。

npm install -g cnpm --registry=https://registry.npmmirror.com

查看是否安装成功

命令： cnpm -v

附加：如果有出现问题的小伙伴们可以检查一下自己的配置有没有出错

①打开cmd敲以下命令检查

②打开环境变量配置检查

③打开安装目录检查是否有以下文件夹

检查【node_global】里是否有【node_modules】文件夹

上面所安装的cnpm、express会出现在【node_global】下的【node_modules】文件夹里

原文链接：https://blog.csdn.net/WHF__/article/details/129362462

六、安装vue及脚手架

1.安装vue.js

npm install vue -g

或者

cnpm install vue -g

根据自己的淘宝镜像源设置选择命令，其中-g是全局安装，指安装到global全局目录去

查看安装的vue信息：

npm info vue

或者

cnpm info vue

2.安装webpack模板

安装webpack

npm install webpack -g

然后等待安装完成

安装webpack-cli：

npm install --global webpack-cli

安装成功后可使用webpack -v查看版本号。

3.安装脚手架vue-cli

npm install -g @vue/cli

用这个命令来查看其版本是：

vue --version
或
vue -V

升级全局的 Vue cli 包：

npm update -g @vue/cli

安装vue-router

npm install -g vue-router

4.vue-cli2.x 创建vue项目

1）创建项目

（最好在cd到D盘的某个位置，即项目的路径，否则项目会新建在C:\Users\Administrator\，也可以直接在想要的项目路径下输入cmd）

vue init webpack 项目名

//项目名不要取中文和大写字母。

2）进行一些配置：

Project name（工程名）:回车

Project description（工程介绍）：回车

Author：作者名：回车

Vue build ==> （是否安装编译器）runtime-compiler、 runtime-only 都是打包方式，第二个效率更高；

Install vue-router ==> 是否要安装 vue-router，项目中肯定要使用到路由，所以Y 回车；

Use ESLint to lint your code ==> 是否需要ESLint检测代码，目前我们不需要所以 n 回车；

Set up unit tests ==> 是否安装单元测试工具目前我们不需要所以 n 回车；

Setup e2e tests with Nightwatch ==>是否需要端到端测试工具目前我们不需要所以n回车；

Should we run npm install for you after the project has been created? (recommended) (Use arrow keys)==> 安装依赖npm install