当下三大主流框架: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项目目录: