nodejs安装&创建vue项目

一、安装环境

node.js下载官网

点击选中图标下载到电脑本地即可。

二、安装步骤

1、双击安装包，一直点击下一步。

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

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

4、不选中，直接点击【Next】按钮。

5、点击【Install】按钮进行安装。

6、安装完毕，点击【Finish】按钮。

三、验证安装

1、测试安装是否成功，按下【win+R】键，输入cmd，打开cmd窗口
输入： node -v 显示node.js 版本

  npm -v  显示npm 版本

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

四、修改全局模块下载路径

1、我希望将全模块所在路径和缓存路径放在我node.js安装的文件夹中，则找到安装的目录，在安装目录下新建两个文件夹【node_global】和【node_cache】

2、创建完毕后，使用管理员身份打开cmd命令窗口，输入

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"

2、修改系统环境变量
将【用户变量】下的【Path】修改为【D:\Nodejs\node_global】，之后点击确定。

在【系统变量】下新建【NODE_PATH】【D:\Nodejs\node_global\node_modules】

在【系统变量】下的【Path】新建添加【%NODE_PATH%】和node全局文件【D:\Nodejs\node_global】，之后点击确定。

经过上面的步骤，nodejs下载的模块就会自动下载到我们自定义的目录，接下来我们测试一下。输入下面的命令：

npm install express -g 

-g是全局安装的意思，不加 -g就是默认下载到当前目录
如图，下载成功，我们回到我们定义的目录查看。

Tips：

如果出现安装失败的话可能是你没有使用管理员身份运行cmd窗口，或者可以修改一下
【node_global】和【node_cache]的权限鼠标右击【node_global】的文件夹，点击【属性】，再点击【安全】，再点击【编辑】，将权限都勾上，随即点击【确定】即可，【node_cache】步骤同理。步骤：

五、更换npm源为淘宝镜像

1、安装淘宝镜像。

npm config set registry https://registry.npmmirror.com
查看是否成功：npm config get registry

六、全局安装基于淘宝源的cnpm

说明：由于npm的服务器在海外，所以访问速度比较慢，访问不稳定，cnpm的服务器是由淘宝团队提 供服务器在国内cnpm是npm镜像，一般会同步更新，相差在10分钟，所以cnpm在安装一些软件时候会比较有优势。但是一般cnpm只用于安装时候，所以在项目创建与卸载等相关操作时候我们还是使用npm。
1、全局安装基于淘宝源的cnpm

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

2、下载完后，我们在本地就能看到cnpm模块
命令： cnpm -v

七、安装vue脚手架

npm install -g @vue/cli

检查是否安装成功：如果输出版本号，说明我们安装node环境成功

八、创建vue项目

1、创建项目
（1）以管理员身份打开命令行界面，进入任意一个想要创建项目的文件夹，输入

vue create test_vue

（2）做一些配置：

（3）按方向键选中该项，然后按回车键：

（4）按空格键按照如下进行配置：

(5）选择vue版本，我选的是3.x

（6）是否要保存为这个项目作为一个模板保存？

（7）出现以下界面，项目创建成功：

九、启动vue项目

1、命令行界面启动

2、跳转到以下界面，默认为8080端口。

3、打开浏览器输入显示的网址：http://localhost:8080/，项目启动成功。

注：如果使用高版本运行低版本vue项目 把package.json下面的

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  }

改成

"scripts": {
    "serve": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve",
    "build": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service build"
  }