<template> <section> <h1>Click on 'Count' button to count your clicks</h1> <button v-stream:click="count$">Count clicks</button> <button @click="clearCounter">Clear counter</button> <p>{{result$}}</p> </section> </template> <script> import { filter, bufferWhen, debounceTime, map, startWith, } from 'rxjs/operators'; export default { domStreams: ['count$'], subscriptions() { return { result$: this.count$.pipe( filter(event => !!event), bufferWhen(() => this.count$.pipe(debounceTime(400))), map(clicks => clicks.length), startWith(0), ), }; }, methods: { clearCounter() { this.count$.next(null); }, }, }; </script>
<style> button { padding: 10px; font-size: 14px; margin-right: 10px; border-radius: 4px; outline: none; } </style>
不需要关心RxJS做了什么（反正我也没看懂），引就vans了。
此时我们需要改动generator/index.js，使它可以识别并写入文件夹。
api.render('./template', { ...options, });
当你调用 api.render('./template')时，generator将会使用 EJS渲染 ./template中的文件 (相对于 generator中的文件路径进行解析)
5.2 命令行提示安装
如果用户是个老手，不想拥有示例组件，该怎么办？在插件安装过程中，我们可以向prompts.js添加提示代码，以供用户在命令行选择：
module.exports = [ { name: `addExample`, type: 'confirm', message: '是否添加示例组件到项目components目录？', default: false, }, ];
询问用户是否要将示例组件添加到项目components目录下。默认是：false。
这时我们需要修改下generator/index.js:
if (options.addExample) { api.render('./template', { ...options, }); }
此时我们撤回安装，重新运行
yarn add --save-dev file://Users/hiro/练习/测试/vue-plugin
vue invoke vue-cli-plugin-rx
将会看到：
此时你查看项目components目录，将会发现多了示例组件文件
6.如何发布插件
来自官方文档
为了让一个 CLI 插件能够被其它开发者使用，你必须遵循 vue-cli-plugin-<name> 的命名约定将其发布到 npm 上。插件遵循命名约定之后就可以：
被 @vue/cli-service 发现;
被其他开发者搜索到；
通过 vue add <name>或 vue invoke <name> 安装下来。
你只需要在package.json中添加描述description，以及在插件项目根目录下创建logo.png。
接下来就是注册npmjs.com