全网最详细的Vue2安装教程

一、安装node.js

打开node.jd官网Node.js 中文网

点击下载安装，选择Windows64位（按自己电脑来选择，一般是Windows64位）

打开安装包直接next就行

安装完成后，检查一下是否安装成功

Windows＋R 输入cmd打开命令行，输入一下命令

node -v
npm -v

输出版本号就说明安装成功

、

二、创建全局安装和缓存日志

在我们的安装目录下，创建名为node_cache和node_global的两个文件夹。

打开管理员命令窗口（一定要是管理员），执行如下命令，将npm的全局模块目录和缓存目录配置到我们刚才创建的那两个目录。

npm config set prefix

npm config set cache

三、配置环境变量

在设置中搜索并打开环境变量

将用户变量最后一行  C:\Users\你的用户名\AppData\Roaming\npm 

修改为 你的安装目录\node_global

系统变量中新增一个变量，如下👇

变量名：NODE_PATH

变量值：你的安装目录\node_modules

系统变量中的path增加下面二个

%NODE_PATH%\node_modules

%NODE_PATH%\node_global

四、打开权限控制

右击node.js文件夹点击属性，选中安全

编辑，把所有的权限都打开

注意，那四个组或用户名都看一下把权限都打开

五、配置淘宝镜像

管理员身份运行cmd,安装淘宝镜像cnpm

淘宝npm镜像原地址 https://registry.npm.taobao.org 在2022年6月30日后已不再可用，因此应使用新地址 https://registry.npmmirror.com/

执行以下命令:

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

查看cnpm配置修改是否成功

npm config list
npm -v

六、安装Vue CLI脚手架

安装Vue cli

npm install -g @vue/cli

检查Vue cli是否安装好，出现版本号则安装成功

vue --version 

七、创建并运行Vue项目

创建一个hello-world项目

vue create hello-world

用VS Code打开项目

第一次运行

Ctrl＋Shift＋`调出终端，输入

npm run serve

后面就可以直接运行npm脚本

调出npm脚本

点击运行

打开链接

执行成功界面

八、vuex，vue-router的配置

// 仓库管理vuex

npm install vuex@3

// 路由

npm install vue-router@3

// 请求和响应

npm install axios