译者按: 你可能npm人家的包过成千上万次,但你是否有创建,发布和使用过自己的npm包?
为了保证可读性,本文采用意译而非直译。另外,本文版权归原作者所有,翻译仅用于学习。 尽管我已经在工作上用了Vue.js一段时间,但我从不需要在npm上发布组件。但最近发现在不同的项目重写组件是件非常蛋疼的事,所以当我第三次使用Vue.js开发项目时,我觉得我们是时候需要一些高度可配置并且可重用的组件了。 首先,你需要安装vue-cli才能开始。
你现在的控制面应该看起来如下图: 现在你只需开始做以下事情:
现在开始创建一个简单的组件,来看一个
将组件注册为名为
你可以在CodeSandbox查看这个组件的demo Fundebug错误实时监控为您的Vue项目保驾护航! 现在,如果你想通过npm使用这个组件,你必须做一些事情。 第1步 - 设置库构建你需要利用 默认情况下,[entry]是你的App.vue,但你可以将其更改为你导入这些组件的任何文件的相对路径。 你可能会也可能不会选择全局注册这些组件,但如果我是你,我会将它们与我的库名称一起注册为前缀。 程序员用组件的时候,代码越少越好。 我已经为我的脚本添加了 这会产生类似于以下的输出: 对于CodeSandbox示例,输入文件应该如下所示: 第2步 - 指向package.json中的输出文件为了确保 第3步 - 以用户身份在npm上添加/登录确保你在npm上注册。 第4步 - 验证npm用户凭证输入 第5步 - 命名你的组件库为你的包选择一个名字,你必须确保它尚未被使用。 确保把它放在你的package.json中。 第6步 - 构建通过执行在第1步中添加的程序包脚本来构建捆绑软件。
第7步 - 在npm上发布组件库运行 就是这样。 你完成了在npm上发布你的Vue组件库! 第8步 - 如何使用你新发布的库从npm安装组件库并将组件导入代码中。 安装:
其中[你的库名]是你在第5步中给出的库的名称。 在你的
现在,你可以开始使用你的组件了,因为我们在第一步中全局注册了这些组件。 对于我们的示例组件
使用上面提到的组件库查看实例:https:///s/n9n7yy2lwp 整个过程我们就完成了。 在Vue.js团队提出CLI版本3后,构建自己的组件库以便重用变得非常容易。 如果觉得这个流程有点帮助,点个赞呗,同时也支持下Fundebug哦! 版权声明: 转载时请注明作者Fundebug以及本文地址: https://blog./2018/06/08/vuejs-component-on-npm/ |
|
来自: Fundebug > 《Fundebug》