Vue学习笔记(一)：从零开始创建一个Vue前端项目

一、开篇

最近公司的老的项目重构，改成了前后端分离的架构，前端采用的是vue.js前端框架，所以接触到vue.js。

Vue.js是当下很火的一个JavaScript MVVM(Model-View-ViewModel)库，它是以数据驱动和组件化的思想构建的。相较于其他的前端框架，Vue.js提供了更加简洁、更易于理解的API，使得我们能够快速地上手并使用。Vue.js不同于以前的jQuery操作DOM，因为Vue.js是数据驱动的，所以无需手动操作DOM。它通过一些特殊的HTML语法，将DOM和数据绑定起来。一旦创建了绑定，DOM将和数据保持同步，每当变更了数据，DOM也会相应地更新。

由于工作需要使用到vue，发现vue确实比较好用。所以准备写一些文章记录一下，自己在学习vue中的一些问题和心得。2016年10月Vue发布了2.x版本，2.0版本在1.0版本的基础上做了好多调整，废弃了好多api，所以在使用过程中还是有一些区别的。我这里使用的版本是2.x的版本。

二、安装和配置

和其他的编程语言一样，使用vue首先需要进行安装和配置一些环境。

首先安装node.js，从node.js官网下载并安装node，安装过程很简单，一路“下一步”就可以了（傻瓜式安装）。安装完成之后，打开命令行工具(win+r，然后输入cmd)，输入 node -v，如下图，如果出现相应的版本号，则说明安装成功。

从官网下载安装node.js后，就已经自带npm（包管理工具）了，可以使用npm -v命令查看npm是否安装成功。另需要注意的是由于版本更新迭代比较快，所以npm的版本最好是3.x.x以上，以免对后续产生影响。

由于npm有些资源被屏蔽或者是国外资源的原因，经常会导致用npm安装依赖包的时候失败，所有我们还需要npm的国内镜像—-cnpm。在命令行中输入