Vue安装及环境配置和node.js全局安装（大学生总结版）

 文章目录

前言

一、node.js安装和配置

1.  下载安装node.js

2.   配置默认安装目录和缓存日志目录

3.   node.js环境配置

4.   配置淘宝镜像源

二、安装vue及脚手架

1.安装vue.js

2.安装webpack模板

3.安装脚手架vue-cli 2.x

4.vue-cli2创建vue项目

三、安装vue-cli 3.x

1、卸载旧版本

2、安装新版本

3、新建项目

总结

---

前言

Vue安装及环境配置、开发工具_vue开发工具 csdn-CSDN博客

本篇是转载袁小萌的Vue安装及环境配置、开发工具。根据自身需求，对其中的内容进行了一些调整，适合第一次安装的新手宝宝。

---

一、node.js安装和配置

1.  下载安装node.js

官网：https://nodejs.org/en/download/

vscode下载链接： https://code.visualstudio.com/download

在官网找到自己想要下载的版本，下载完成后，直接双击安装包，然后开始安装。具体安装就不展示了，其实就是无脑下一步。
安装完成后

打开命令提示符（win+r） 查看是否安装成功

注：命令提示符要以管理员身份登录，否则可能会报错安装失败

node -v  查看node的版本

npm -v  查看npm的版本

​

2.   配置默认安装目录和缓存日志目录

创建默认安装目录和缓存日志目录
注：需要手动创建用来保存的安装文件夹和缓存文件夹，并设置安全允许权限，以便写入、修改文件夹中的内容。

默认安装目录  D:\Program Files\node_global

缓存日志目录  D:\Program Files\node_cache

​

执行下面的命令，将npm的全局模块目录和缓存目录配置到刚刚创建的那两个目录中：

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

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

​

查看路径

查看npm全局安装包保存路径

npm config get prefix  

查看npm装包缓存路径

npm config get cache  

查看全局安装目录（可能为空）

npm list -global

查看所有npm 配置

npm config list

​

3.   node.js环境配置

1.   用户变量（上面那个）

（1）删掉path中的C:\Users\admin\AppData\Roaming\npm
（2）添加变量
D:\Program Files\nodejs\node_global

D:\Program Files\nodejs\node_cache

​

2.  系统变量（下面那个）

1、添加变量 NODE_PATH

​　　　

2、添加path变量

％NODE_PATH%或者D:\ProgramFiles\nodejs\

​

4.   配置淘宝镜像源

查看npm下载源 

npm config get registry 

直接修改npm的默认配置 

npm config set registry https://registry.npmmirror.com

查看npm下载源是否配置成功 

npm config get registry

或

npm config list 

配置前为"https://registry.npmjs.org/"

配置后为淘宝镜像，表示配置成功

​

二、安装vue及脚手架

1.安装vue.js

npm install vue -g

查看安装的vue信息 

npm info vue

​

查看安装的vue版本 （可能为空，如下图）

npm list vue

​

2.安装webpack模板

npm install webpack -g

安装webpack-cli  

npm install --global webpack-cli

 查看版本号 

webpack -v

​

3.安装脚手架vue-cli 2.x

我的电脑已经安装好了vue-cli 3.x，就不展示vue-cli 2.x

npm install vue-cli -g

检查安装版本vue  vue --version或vue -V  

vue --version

vue -V

安装vue-router  

npm install -g vue-router 

4.vue-cli2创建vue项目

 vue init webpack 项目名

npm run dev  进入到项目目录下并运行

按提示打开地址http://localhost:8081， 打开网址

结束项目运行：ctrl+c，选择Y即可停止项目的运行。

三、安装vue-cli 3.x

1、卸载旧版本

卸载2.x版本

npm uninstall vue-cli -g

卸载3.x版本

npm uninstall @vue/cli -g

2、安装新版本

npm install @vue/cli –g

3、新建项目

1.创建项目：vue create 项目名

注意：在想要新建项目的位置用管理员身份打开命令符，否则系统自定义安装位置，后期很难找到项目安装具体位置

2.选择自定义，键盘上下键选择，回车键确定

​

3.配置自定义设置 ，上下键移动位置，空格键选择，回车键确定

​

4.选择版本

​

5.是否选择路由模式，键盘输入y即可

​

6.选择CSS预处理器

​

7.后面直接按回车键，直到出现是否报错当前配置，键盘输入n,回车，等待创建项目

​

---

总结

一定要使用管理员身份登录