开始学习Vue.js

准备工作

开发工具我使用了WebStorm，在里面进行了插件安装，步骤如下
1.安装插件
打开Settings（或者Preferences）=>Plugins=>Browse repositories，然后搜索vue，则会查找到vue进行安装
2.设置JavaScript语言的支持版本到ES6
Settings(Preferences) => Language & Frameworks =>  JavaScript. Set Javascript Language Version 修改为 ECMAcript6



开始编写
Vue其实和AngularJS很像，所有对于写过Angular的人来讲会更快理解一些

HTML标签

<div id="app">
  {{ message }}
</div>

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})

以上就是一个最简单的例子，来自官方
http://v1.vuejs.org/guide/index.html



构建项目
vue有自己的构建工具(vue-cli)
主要是结合webpack或者browserify来生成构建项目

首先先进行安装vue-cli，（需要node环境）

npm install -g vue-cli

，全局安装vue-cli
通过vue list可以列出vue-cli所支持的模板，也就是可以构建出不同模板形式的项目结构
比如使用webpack模板

vue init webpack getStart

会帮我们创建一个基于webpack构建的项目，生成相应的文件目录以及代码

cd getStart

进入项目目录之后

npm install

进行安装项目得依赖，安装完成后，使用

npm run dev

来运行启动这个生成的项目