vue2.0项目手把手教学(一)

序：

之前一直做的是angularjs项目，目前已经算是过时了吧，但是只是框架过时了，技术还是很有深度的。

还记得vue刚起步的时候，说实话真的看不起那些学vue的孩子，因为当时都觉得vue是入门级前端框架，这玩意随便看看就会了，特别是学过angularjs的同学，上手非常快。还有就是说vue是参考angularjs来做的，语法也有很多都很相似，可随着vue社区的不断壮大，这玩意还是得学，必须变成当初“最讨厌的人”，哈哈。好了，废话不多说，走起。。。

环境配置：（全程mac版，windows没试过，如果windows有问题可以提问）

1、node环境

node可以说是前端必备品了，如果说没有安装过node，那我觉得你们老师应该会教你，要不然你也不会用vue了吧。。。。

mac安装node我用的是brew，当然你也可以去node官网下载，然后再手动安装，安装完毕就可以查看你的node版本和npm版本了

我的版本都是当前最新的。

2、VUE全局安装

sudo npm install vue vue-cli -g

小提示：mac下全局安装都需要管理员权限才可以（-g 需要和sudo一起用），要不然会报错

安装完之后就可以到你的控制台查看vue版本了

这里是大V不是小v哦

3、全局安装webpack，安装方法同vue，这里就不多讲了下面来生成项目吧

项目搭建

1、首先来介绍一个初始化项目的命令

vue init webpack projectName

projectName是你的项目名称，注意：这个是可选的，也就是说，如果加上projectName就会生成一个项目文件夹，如果不加上的话，就会在当前文件夹生成项目。然后在项目里执行npm install，安装你需要的模块。

执行完之后就会看到你的文件夹里已经有vue的项目了，这时候就可以启动了

npm start 或者 npm run dev

这两个启动方式是一样的，这时候vue项目的初始化就已经完成，恭喜你，可以尽情的翱翔了，啦啦啦。。。。