第一个vue项目的构建

序言

Vue.js是当下很火的一个JavaScript MVVM库，它是以数据驱动和组件化的思想构建的。相比于Angular.js，Vue.js提供了更加简洁、更易于理解的API，使得我们能够快速地上手并使用Vue.js。
同时，Vue基于webpack来进行开发。
Vue API：http://cn.vuejs.org/v2/api/

解析MVVM模式

• MVVM模式（Model-View-ViewModel）
• 从View侧看，ViewModel中的DOM Listeners工具会帮我们监测页面上DOM元素的变化，如果有变化，则更改Model中的数据；
• 从Model侧看，当我们更新Model中的数据时，Data Bindings工具会帮我们更新页面中的DOM元素。

使用Vue的过程就是定义MVVM各个组成部分的过程的过程。

1. 定义View

• 定义Model
• 创建一个Vue实例或"ViewModel"，它用于连接View和Model
• 创建Vue实例时，需要传入一个选项对象，选项对象可以包含数据、挂载元素、方法、模生命周期钩子等等。

双向绑定示例

MVVM模式本身是实现了双向绑定的，在Vue.js中可以使用v-model指令在表单元素上创建双向数据绑定。

    
{{ message }}
    

开始实战

为了达到快速的开发，我们可以使用Vue的各种模版，首先我们得先构建一下开发环境。

1. 安装node
2. 安装Vue官方命令行工具

Vue.js 提供一个官方命令行工具，可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置，带来现代化的前端开发流程。

# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init [webpack模版] [my-project项目名]
# 进入项目目录
$ cd my-project
# 执行模块的下载安装，所需模块的配置信息在 package.json 中
$ npm install
# 执行 dev 脚本（也在 package.json 中），即项目开发模式
$ npm run dev
# npm run build 执行 build 脚本，项目文件打包生成

ios 不要忘记给予权限哦！sudo npm install 即可
vue-cli会有几种模版：

• webpack - A full-featured Webpack + vue-loader setup with hot reload, linting, testing & css extraction.（全功能的 Webpack + vue-loader 设置，包括热加载，静态检测，测试，css 提取）
• webpack-simple - A simple Webpack + vue-loader setup for quick prototyping.（一个简易的 Webpack + vue-loader 设置，以便于快速开始）
• browserify - A full-featured Browserify + vueify setup with hot-reload, linting & unit testing.（全功能的 Browserify + vueify 设置，包括热加载，静态检测，单元测试）
• browserify-simple - A simple Browserify + vueify setup for quick prototyping.（一个简易的 Browserify + vueify 设置，以便于快速开始）
• simple - The simplest possible Vue setup in a single HTML file
  相关阅读：Announcing vue-cli（译）Vuejs 自己的构建工具 vue-cli

Vue初始化

命令行输入：

npm run dev

这一行命令代表着它会去找到package.json的scripts对象，执行node bulid/dev-server.js。在这文件里，配置了Webpack，会让它去编译项目文件，并且运行服务器，我们在localhost:8080即可查看我们的应用。
效果如下：