分析一下这个组件已经实现的功能:
- 点赞的图标可定制
- 点赞的动画可定制
我们会在此基础上做一些改进:
- 可以把图标指定为激活状态
- 可以把图标替换为图片
- 支持点赞完成的后续操作
接下来,开始:
一、下载模板首先,用 vue-cli 下载一个 Vuejs 模板。
与官网模板下载方式一致:
# 下载模板
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.vuesrc/index.jsexample/src/main.js
总而言之,就是把 Hello 改为 Star, 把 hello 改为 star。
拷贝代码:

说明:报错的话,重新运行一下项目。










随时随地看视频
热门评论
-
qq_异乡人丶_02019-09-16 4
-
慕哥35736792018-10-25 3
-
qq_异乡人丶_02019-09-16 4
查看全部评论?
棒棒的,能请教一下,如何把它使用到自己的项目中呢
?