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

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

17、18年的框架使用

搭建Vue环境：

一、搭建node.js环境

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

nodejs官网下载

一般下载稳定版本即可。

其他环境下载版本

下载完成安装，直接一路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项目目录：

项目目录说明