最近接手了一个后台数据管理系统，用的vue2.0，粗略谈一下感受。
第一次接触vue，先在官网看教程和api，大概了解是个什么东东，心里大概有点底了，还是撸helloworld吧。
一：vue-cli
因为之前有用过angular，所以node已经装好了，可以直接搭建脚手架。
npm install -g vue-cli 全局安装
vue init webpack project-name 创建一个vue项目
cd project-name 进入目录
npm install 安装依赖
npm run dev 启动项目
上图为安装完后的项目结构
index.html 为整个项目的入口文件
src/App.vue是根组件，后面的组件都在这里注入
src/main.js是主js，公共类全局类配置等都可以写在这里
二：vue-router
路由，替代传统的#锚点，可在不加载刷新的情况下通过路由快速切换
npm install vue-router 安装路由
在src 文件夹下的 main.js 文件内引入
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
引入Vue和VueRouter插件
<script src="vue.js"></script>
<script src="vue-router.js"></script>
var routes = [{
path: "/home",
component: {
template: "#a"
}
},
{
path: "/nav",
component: {
template: "#b"
}
},
];
// 定义路由组件
var router = new VueRouter({
routes
});
// 定义路由
new Vue({
el: "#main",
router
});
// 创建和挂载实例
此时可以利用router-link跳转（会渲染成一个a标签）
<div id="main">
<router-link to="/home">One</router-link>
<router-link to="/nav">Two</router-link>
<router-view></router-view>
</div>
三：component
组件，类似公共方法，就是一个个小的模块，定义的组件可以在任意页面中调用，一个组件就是一个.vue文件，页面包括3个部分，template、script和style。
1、template为html部分，script逻辑和style样式。
template下直接子元素只允许一个标签，不可同时出现多个。
正确：<template>
<div> 子
<div></div> 孙
<div></div> 孙
</div>
</template>
错误：<template>
<div> 子
<div></div> 孙
<div></div> 孙
</div>
<div> 子 </div>
</template>
2、script
2.1 组件调用
在调用组件时，需把其要调用的组件先在此模块中注入
在调用时只需调用组件名即可
此时test.js里的内容，会显示在这个页面上。
2.2 组件传值
组件传值有三种方法，父组件-->子组件，子组件-->父组件，同级之间传值
父向子页面传值：
需通过prop传值，父页面在跳转时绑定所需要的值为title
结合上面所说的路由，跳转时传值，可直接在跳转处绑定数据
<router-link :to="{ title: '12345'}">aaa</router-link>
子向父传值：
如果子组件需要改变父组件的状态，需要通过$emit触发父组件的事件
this.$emit('title',this.title)
同级页面传值：
可通过公共方法来传值
四：vuex
如果项目非常复杂，父子组件之间传递值比较麻烦，也可以通过vuex来管理
未完待续
