Vue入门---配置环境，搭建项目

当下三大主流框架：Vue，Angular，React。因Vue的一些优势，Vue成为许多前端开发者的首选框架。依据17年-18年的框架使用趋势，可以看出来Vue迅速被越来越多前端开发者使用。

搭建Vue环境 ：

一、搭建node.js环境

下载网址： https://nodejs.org/en/

一般下载稳定版本即可。
下载完成安装，直接一路next，是否接受的accept即可。

验证是否安装成功：

1.win键 + R -> cmd -> 确定

2.输入node -v (v一定是小写) -> 回车

3.出现版本号即安装成功。

4.若未出现版本号，提示‘node不是内部或外部命令…’，即计算机找不到node.js。则需要配置环境变量。

5.计算机 -> 属性 -> 高级系统设置 -> 高级 -> 环境变量 -> 系统变量 -> Path值（如： D:\node）

或者在terminal里直接验证是否安装成功。

二、安装cnpm

用node中的npm管理器来构建

npm 下载资源的速度相对来说是比较慢的，

所以可以用淘宝镜像来代替。运行命令:npm install -g cnpm --registry=https://registry.npm.taobao.org

导入cnpm后可以用cnpm代替npm。

三、安装webpack

1.win键 + R -> cmd -> 确定

2.输入： cnpm install webpack -g ，运行一段时间后会出现 ：Do you want to install ‘webpack-cli’ (yes/no): 输入yes 运行就会安装成功

在terminal输入 ：webpack -v 得到版本号即安装成功

四、安装vue-cli

terminal 输入 ：cnpm install vue-cli -g

输入： Vue -V (最后的V必须是大写) 得到版本号即安装成功

五、创建Vue项目

在terminal输入 ： vue init webpack firstVue ( firstVue 是创建的Vue项目名，可以改变 )

在创建过程中会提出一些问题：

第一个问题就是项目名，（默认是上面自己起的项目名，可以直接回车确认），但是如果项目名有大写字母，会暂停继续往下走：

可以直接换成小写字母，但不会影响到实际创建的Vue项目名

运行命令最下面会指示后续的步骤来开启此Vue项目：

启动项目：

打开此链接：

此Vue项目创建成功。

Vue项目创建完毕，形成Vue项目目录：