ejs

【Vue CLI】手把手教你撸插件

混江龙づ霸主 提交于 2020-09-28 00:15:58
本文首发于 vivo互联网技术 微信公众号 链接: https://mp.weixin.qq.com/s/Rl8XLUX7isjXNUmbw0-wow 作者:ZhuPing 现如今 Vue 作为主流的前端框架之一,其健全的配套工具,活跃的开源社区,让广发码农热衷追捧。Vue CLI 作为其官方的开发构建工具,目前已更新迭代到 4.x 版本,其内部集成了日常开发用到的打包压缩等功能,简化了常规自己动手配置 webpack 的烦恼。另外提供的插件功能更是满足了使用者定制化的需求场景,那么本文就来讲下如何去开发一个插件。 假设我们团队现在需要去开发一套 UI 组件库,由于团队内每个人的编码习惯不一样,可能会出现单一组件命名、目录结构等不统一的问题,对于团队统一对外呈现的组件库来说,这当然不是一件好事。那有什么办法可以去约束团队成员统一风格呢?这里我们就可以开发一个组件插件来解决这些烦恼,那么我们来看下如何来开发这个组件插件呢? 一、命名规范 为了让一个 CLI 插件能够被其他开发者使用,官方介绍了必须遵循 vue-cli-plugin-<name> 的命名约定,所以这里我们命名为 vue-cli-plugin-next-component。 mkdir vue-cli-plugin-next-component && cd $_ 对于官方自己的插件,都是以 @vue/cli-plugin