参考：https://github.com/OYsun/VueStar/tree/master/src

分析一下这个组件已经实现的功能：

1. 点赞的图标可定制
2. 点赞的动画可定制

我们会在此基础上做一些改进：

1. 可以把图标指定为激活状态
2. 可以把图标替换为图片
3. 支持点赞完成的后续操作

接下来，开始：

首先，用 vue-cli 下载一个 Vuejs 模板。

https://github.com/savoygu/vue-component-template

与官网模板下载方式一致：

# 下载模板
vue init savoygu/vue-component-template i-vue-star

项目目录：

# 进入到依赖中
cd i-vue-star
# 安装依赖，下载慢的话，用 cnpm
npm install
# 运行项目
npm run demo:dev

说一下这个模板怎么使用：通过 npm run demo:dev 是把“开发示例”运行起来了，在 example/src/main.js 中注册了 src/components/Hello.vue组件，在 example/src/App.vue中使用了 src/components/Hello.vue组件，所以当我们编写 src/component/Hello.vue 时，就能看到当前组件编写的效果。

再开发之前，先修改一下组件文件名字，修改 Hello.vue为 Star.vue，修改这些文件：

• src/components/Hello.vue
• src/index.js
• example/src/main.js

总而言之，就是把 Hello 改为 Star, 把 hello 改为 star。

拷贝代码：

说明：报错的话，重新运行一下项目。

详细代码参考：https://github.com/savoygu/i-vue-star