vue cli3 Generator插件开发教程
vue cli3 Generator插件开发教程
定制生成插件
vue cli3提供了扩展定制化插件API。
CLI插件是一个可以为@vue/cli
项目添加额外特性的npm包。
它始终包含一个Service插件
作为其主要导出,可选包含一个 Generator 和一个 Prompt 文件。
当前文档讲述如何编写一个Generator插件。
Generator插件用于向package.json
文件注入额外的依赖或字段,并向项目中添加或删除文件。
一个Generator插件的目录解构是这样的:
Generator插件示例代码:
Generator的渲染模板:
当调用api.render('./template')
时,该Generator插件会使用 EJS渲染./template
下的所有文件。
还可以使用yaml前置信息继承并替换已有的模板文件的一部分:
也可以多出替换,你需要将要替换的字符串用<%# REPLACE %>
和 <%# END_REPLACE %>
块包裹起来:
注意:如果你想渲染一个以点开头的模板文件(例如:.env
),需要把文件名开头的点改为下划线(因为以点开头的文件会在插件发布到npm的时候忽略):
当你想渲染以下划线开头的文件时,需要把文件名开头再添加一个下划线:
发布插件
为了让一个 CLI 插件能够被其它开发者使用,你必须遵循 vue-cli-plugin-<name>
的命名约定将其发布到 npm 上。插件遵循命名约定之后就可以:
被
@vue/cli-service
发现;被其它开发者搜索到;
通过
vue add <name>
或vue invoke <name>
安装下来。
使用命令:
安装命令:
至此完成,vue cli Generator插件已经发布成功并且可以使用了
Last updated