安装Node和Vue-cli(脚手架)的详细流程

第一步:安装node.js

去到node.js的官网:https://nodejs.org/zh-cn/download/

vue项目node_modules包运行越来越大 vue node modules安装_配置环境变量

下载该运行程序,在d盘创建node.js文件,把其放里面,并运行。

vue项目node_modules包运行越来越大 vue node modules安装_配置环境变量_02

vue项目node_modules包运行越来越大 vue node modules安装_vue.js_03

vue项目node_modules包运行越来越大 vue node modules安装_前端_04

修改node.js文件的存放路径,将其改为d盘下的node.js.

vue项目node_modules包运行越来越大 vue node modules安装_环境变量_05

最后点击next,就显示finish页面,点击finish就开始安装了。

安装完成后,可以在cmd窗口运行node -v 检测是否安装成功,若成功,则显示node的版本号。

vue项目node_modules包运行越来越大 vue node modules安装_node.js_06

第二步:配置node.js的环境变量

1、找到d盘下的Node.js文件,创建node_global,node_cache这两个文件

vue项目node_modules包运行越来越大 vue node modules安装_vue.js_07


2、在cmd窗口运行这两行命令:

npm config set prefix "D:\nodejs\node_global"

npm config set cache "D:\nodejs\node_cache"

3、配置环境变量

点击此电脑右击属性,选择关于中的高级系统设置,点击环境变量设置

vue项目node_modules包运行越来越大 vue node modules安装_vue.js_08

vue项目node_modules包运行越来越大 vue node modules安装_配置环境变量_09

(1)点击用户变量中的path,将系统默认的路径,修改为D:\nodejs\node_global,修改完之后点击确定。

vue项目node_modules包运行越来越大 vue node modules安装_node.js_10

(2)新建一个系统变量,配置环境变量的名称和值,配置完后点击确定。

变量名:NODE_PATH

变量值:D:\node.js\node_global\node_modules

vue项目node_modules包运行越来越大 vue node modules安装_前端_11

(3)最后在点击外层的确定,环境变量就配置完毕。

vue项目node_modules包运行越来越大 vue node modules安装_vue.js_12

第三步:安装vue-cli(脚手架)

为了更快地安装脚手架,我们会首先安装淘宝镜像。

(1)点击window+r输入cmd点击确定打开命令窗口,输入npm config set registry=http://registry.npm.taobao.org

vue项目node_modules包运行越来越大 vue node modules安装_前端_13

(2)输入安装脚手架的命令:npm install -g @vue/cli

vue项目node_modules包运行越来越大 vue node modules安装_配置环境变量_14

注意:这时可能会出现-4048错误,原因是因为权限不够。

解决办法:找到c盘下的windows的system32里面的cmd.exe,右击使用管理员身份运行。

方法:通过目录找C:\Windows\System32\cmd.exe,然后右键单击,选择以管理员身份运行。

vue项目node_modules包运行越来越大 vue node modules安装_配置环境变量_15

在输入npm install -g @vue/cli,就可以正常安装,最后可以在命令窗口运行vue -v 若显示vue的相关信息,就安装成功。

vue项目node_modules包运行越来越大 vue node modules安装_vue.js_16

第四步:创建vue项目

(1)转到你所创建的具体的目录下,打开命令行窗口,在里面运行vue create 项目名称

vue项目node_modules包运行越来越大 vue node modules安装_配置环境变量_17

(2)选择你想要创建的vue的版本,这里我创建的vue2的项目。

vue项目node_modules包运行越来越大 vue node modules安装_配置环境变量_18

若此时仍然出现-4048错误,则说明权限不够,打开node.js文件目录下的node_global右击属性,打开安全,编辑权限,将所有权限打开,点击确定,同理node_cache也是如此操作,然后在重新创建vue项目,即可。

vue项目node_modules包运行越来越大 vue node modules安装_vue.js_19

(3)运行成功后,会出现如下界面,此时,项目就创建完毕。

vue项目node_modules包运行越来越大 vue node modules安装_前端_20