实现此例您可以学到：
- vue-cli的基本应用
- 父组件如何向子组件传递值
- 单文件组件如何引入scss
- v-on和v-for的基础应用
一、搭建vue开发环境
1）更换镜像到cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
2）安装vue-cli
cnpm install -g vue-cli
3）初始化vue项目
命令模式进入项目所在的目录，如d:\test\，输入vue init 项目名称即可。如果你想引入vue2.0框架，必须把nodejs、webpack和npm升级到最新版本。
4）node-sass和sass-loader实现scss的编译
用cnpm安装node-sass和sass-loader，用于编译scss相关内容。
5）通过npm install 安装开发和运行依赖组件
进入刚创建好的目录，执行cnpm install安装所有的开发和运行依赖项
6）通过npm run dev支持调试版本
在安装成功后，直接运行npm run dev即可看到demo的运行界面。
注意：
1.按照上述步骤搭建最终可以创建好vue项目，但也遇到几个坑
2.安装的nodejs和webpack、npm不是最新版本
二、实现Tag组件
学习一个新框架，首先是看文档，最重要还是实践。写一个hello world过于简单，要玩就玩个大的。我们就来实现一个Tag（标签）组件领悟一下vue的强大。
组件需求
实现思路
具体实现
内容代码
1.1 template只是模板语言的标记，解析后不会生成到页面，所以内容需要用一个div包裹住；
1.2 template中可以访问Js代码中data()和Methods、props等相关属性；
1.3 props用于父组件向子组件传递值，此值可以动态传递；
1.4 v-on绑定事件，v-for用于迭代集合。
代码
2.1 使用v-model="val"实现输入自动更新val这个属性；
2.2 add方法获取val这个属性的值，然后判断是否为空，以及是否在已添加标签数据中存储，如果不存在则添加到标签数组中。
2.3 props的width类型和默认值，限制类型为String，默认值为auto。
代码
$back-color:#fed;
span{
background: $back-color;
}
.tag-cont{
list-style: none;
margin: 10px auto;
padding: 5px;
border: 1px solid lightblue;
}
.tag-cont > li{
float: left;
padding: 5px;
border:1px solid gray;
border-radius: 10px;
animation: item-show 1s;
margin: 10px;
}
标记style标签内的Css实现
标签的形式引用即可，代码如下：
效果图
学习总结
Tag组件其实是一个很小的组件，业务价值很低，主要用于Vue新手入门。主要实现Vue常用的父组件改变子组件的值，view改变model，model的变化反应到view上，事件的绑定等功能。
还需要继承深入了解，以及vuex管理vue组件的应用，还有组件之间的通信。
