Vue安装与配置教程（非常详细）

一、下载和安装Vue

首先下载node

官网下载地址Download | Node.js

根据自己的电脑系统，选择适合自己的版本，推荐LTS，长久稳定版本。

下载好之后，双击下载的安装包。

①点击next

②勾选同意，点next

③建议把目录更换到自己想要安装的目录里面（我这里是提前建好一个目录D:\download_software\nodejs

④默认勾选，直接next

⑤不勾选，直接next

⑥install安装

⑦点击finish完成安装。

⑧同时按win+R,输入cmd,回车，打开终端。

在终端分别输入以下两个命令；

node -v

npm -v

显示以下结果即为安装成功

安装后的完整目录：

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

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

打开终端，执行如下命令，将npm的全局模块目录和缓存目录配置到我们刚才创建的那两个目录。

npm config set prefix “你的安装目录\node_global”

npm config set cache “你的安装目录\node_cache”

为了以后下载包快速，执行如下代码，修改源为淘宝镜像。（我刚开始使用淘宝镜像，显示镜像源有问题，说是需要修复，所以这里再提供一个华为源）

淘宝源

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

华为源

npm config set registry=https://mirrors.huaweicloud.com/repository/npm/

（二者选其一即可）

查看npm配置修改是否成功

npm config list

三、配置环境变量
在安装过程中，自动配置了两个环境变量，我们需要增加和修改一下。

1.环境变量—用户变量—选中Path—点编辑-将 C:\Users\你的用户名\AppData\Roaming\npm 修改为 ：你的安装目录\node_global

2. 环境变量—系统变量—新建

变量名：NODE_PATH

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

（这里的node_modules目录还没有，之后的步骤执行后就会自动生成这个文件夹。）

3.在系统变量—Path添加上%NODE_PATH%

四、安装vue

npm install vue -g

（使用管理员身份运行这条命令，以防出现报错）

（如果在这里出现下面的报错，就把镜像源换成华为源）

出现下面即安装成功

2. 安装webpack模板

npm install webpack -g

3.安装webpack-cli

npm install webpack-cli -g

4. 安装脚手架vue-cli

npm install vue-cli -g

输入vue --version，能输出版本号即成功安装

5. 安装vue-router

npm install vue-router -g

安装好之后打开node_modules文件夹，可以看到安装的模块都统一在这里

五、运行第一个的 vue-cli应用程序

1.创建项目（最好自定义一个项目目录）可能会出现权限问题，所以还是以管理员运行cmd窗口。

2.创建一个基于webpack模板的vue应用程序

 vue init webpack 项目名

根据自己的需求来操作。

• 项目名是？回车
• 项目描述？回车
• 作者？回车
• 是否安装编译器 回车
• 是否安装vue-router y 回车
• 是否使用ESLint做代码检查 n 回车
• 是否安装单元测试工具 n 回车
• 单元测试相关 n 回车
• 创建完成后直接初始化 n 回车

 （具体可参考上面的图片）

创建好之后如下

接着按照代码提示手动初始化

cd myvue

npm run dev

运行之后如下 

 复制访问网址：http://localhost:8080

成功！

停止服务

 两下Ctrl+C 或者Ctrl+C一下然后Y