脚本宝典收集整理的这篇文章主要介绍了

如何使用@vue/cli 3.0在npm上创建,发布和使用你自己的Vue.js组件库

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p><code></p> <p><strong>译者按:</strong> 你可能npm人家的包过成千上万次,但你是否有创建,发布和使用过自己的npm包?</p> <ul> <li>原文: <a href="https://medium.com/justfrontendthings/how-to-create-and-publish-your-own-vuejs-component-library-on-npm-using-vue-cli-28e60943eed3" rel="nofollow noreferrer" target="_blank">How to create, publish and use your own VueJS Component library on NPM using @vue/cli 3.0</a> </li> <li>译者: <a href="https://fundebug.com/" rel="nofollow noreferrer" target="_blank">Fundebug</a> </li> </ul> <p><strong>为了保证可读性,本文采用意译而非直译。另外,本文版权归原作者所有,翻译仅用于学习。</strong></p> <p>尽管我已经在工作上用了<a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>.js一段时间,但我从不需要在npm上发布组件。但最近发现在不同的项目重写组件是件非常蛋疼的事,所以当我第三次使用<a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>.js开发项目时,我觉得我们是时候需要一些高度可配置并且可重用的组件了。</p> <p>首先,你需要安装vue-cli才能开始。</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" npm install -g @vue/cli # 或者 yarn global add @vue/cli vue create my-vue-library " title="" data-original-title="复制"></span> </div> </p></div> <pre class="bash hljs"><code class="bash"> npm install -g @vue/cli <span class="hljs-comment"># 或者</span> yarn global add @vue/cli vue create my-vue-library </code></pre> <blockquote><p>我们正在使用vue-cli 3.0 beta版本。 你可能会Github的<code>README.md</code>看到一条警告:“除非您有冒险精神,否则不要在生产中使用”,很显然我很有冒险精神,哈哈。</p></blockquote> <p>你现在的控制面应该看起来如下图:</p> <p><span class="img-wrap"><img data-src="/img/bVbb2qJ?w=678&amp;h=41" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="图片描述" title="图片描述" style="cursor: pointer;"></span><br />现在你只需开始做以下事情:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" npm run serve " title="" data-original-title="复制"></span> </div> </p></div> <pre class="bash hljs"><code class="bash"> npm run serve </code></pre> <p>现在开始创建一个简单的组件,来看一个<code>Banner</code>组件的例子。</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<template></p> <div class=&quot;banner&quot; :style=&quot;bannerStyles&quot; :class=&quot;`banner__${position}`&quot;> <slot></slot> </div> <p></template></p> <p><script> const defaultStyles = { left: 0, right: 0, }; export default { props: { position: { type: String, default: 'top', validator(position) { return ['top', 'bottom'].indexOf(position) > -1; }, }, styles: { type: Object, default: () => ({}), }, }, data() { return { bannerStyles: { ...defaultStyles, ...<a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.styles, }, }; }, }; </script></p> <style lang=&quot;scss&quot; scoped> .banner { padding: 12px; background-color: #fcf6cd; color: #f6a623; text-align: left; position: fixed; z-index: 2; } .banner__top { top: 0; } .banner__bottom { bottom: 0; } </style> <p>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="xml hljs"><code class="html"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name"><a href="http://www.js-code.com/tag/div" title="浏览关于“div”的文章" target="_blank" class="tag_link">div</a></span> <span class="hljs-attr">class</span>=<span class="hljs-string">"banner"</span> <span class="hljs-attr">:style</span>=<span class="hljs-string">"bannerStyles"</span> <span class="hljs-attr">:class</span>=<span class="hljs-string">"`banner__${position}`"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">slot</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">slot</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"> <span class="hljs-keyword"><a href="http://www.js-code.com/tag/const" title="浏览关于“const”的文章" target="_blank" class="tag_link">const</a></span> defaultStyles = { <span class="hljs-attr">left</span>: <span class="hljs-number">0</span>, <span class="hljs-attr">right</span>: <span class="hljs-number">0</span>, }; <span class="hljs-keyword"><a href="http://www.js-code.com/tag/export" title="浏览关于“export”的文章" target="_blank" class="tag_link">export</a></span> <span class="hljs-keyword">default</span> { <span class="hljs-attr">props</span>: { <span class="hljs-attr">position</span>: { <span class="hljs-attr">type</span>: <span class="hljs-built_in">String</span>, <span class="hljs-attr">default</span>: <span class="hljs-string">'top'</span>, validator(position) { <span class="hljs-keyword">return</span> [<span class="hljs-string">'top'</span>, <span class="hljs-string">'bottom'</span>].indexOf(position) &gt; <span class="hljs-number">-1</span>; }, }, <span class="hljs-attr">styles</span>: { <span class="hljs-attr">type</span>: <span class="hljs-built_in">Object</span>, <span class="hljs-attr">default</span>: <span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> ({}), }, }, data() { <span class="hljs-keyword">return</span> { <span class="hljs-attr">bannerStyles</span>: { ...defaultStyles, ...<a href="http://www.js-code.com/tag/this" title="浏览关于“this”的文章" target="_blank" class="tag_link">this</a>.styles, }, }; }, }; </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">style</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">"scss"</span> <span class="hljs-attr">scoped</span>&gt;</span><span class="css"> <span class="hljs-selector-class">.banner</span> { <span class="hljs-attribute">padding</span>: <span class="hljs-number">12px</span>; <span class="hljs-attribute">background-color</span>: <span class="hljs-number">#fcf6cd</span>; <span class="hljs-attribute">color</span>: <span class="hljs-number">#f6a623</span>; <span class="hljs-attribute">text-align</span>: left; <span class="hljs-attribute">position</span>: fixed; <span class="hljs-attribute">z-index</span>: <span class="hljs-number">2</span>; } <span class="hljs-selector-class">.banner__top</span> { <span class="hljs-attribute">top</span>: <span class="hljs-number">0</span>; } <span class="hljs-selector-class">.banner__bottom</span> { <span class="hljs-attribute">bottom</span>: <span class="hljs-number">0</span>; } </span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span></code></pre> <p>将组件注册为名为<code>Banner的</code>组件后,可以在模板中简单使用该组件:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<Banner>Fundebug:最专业的应用错误监控平台!</Banner>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="xml hljs"><code class="html" style="word-break: break-word; white-space: initial;"><span class="hljs-tag">&lt;<span class="hljs-name">Banner</span>&gt;</span>Fundebug:最专业的应用错误监控平台!<span class="hljs-tag">&lt;/<span class="hljs-name">Banner</span>&gt;</span></code></pre> <p>你可以在<a href="https://codesandbox.io/s/rl5626jy1n" rel="nofollow noreferrer" target="_blank">CodeSandbox</a>查看这个组件的demo</p> <p><a href="https://www.fundebug.com" rel="nofollow noreferrer" target="_blank">Fundebug</a>错误实时监控为您的<a href="http://www.js-code.com/tag/vue" title="浏览关于“Vue”的文章" target="_blank" class="tag_link">Vue</a>项目保驾护航!</p> <p>现在,如果你想通过npm使用这个组件,你必须做一些事情。</p> <h3 id="articleHeader0">第1步 - 设置库构建</h3> <p>你需要利用<code>vue-cli</code>将你的组件构建为库。 将<code>vue-cli-service build --target lib --name myLib [entry]</code>添加到你的package.json脚本中。</p> <p>默认情况下,[entry]是你的App.vue,但你可以将其更改为你导入这些组件的任何文件的相对路径。 你可能会也可能不会选择全局注册这些组件,但如果我是你,我会将它们与我的库名称一起注册为前缀。 程序员用组件的时候,代码越少越好。</p> <div class="google-auto-placed ap_container" style="text-align: center; width: 100%; height: auto; clear: none;"><ins data-ad-format="auto" class="adsbygoogle adsbygoogle-noablate" data-ad-client="ca-pub-6330872677300335" data-adsbygoogle-status="done" style="display: block; margin: auto; background-color: transparent;"><ins id="aswift_4_expand" style="display: inline-table; border: none; height: 0px; margin: 0px; padding: 0px; position: relative; visibility: visible; width: 697px; background-color: transparent;"><ins id="aswift_4_anchor" style="display: block; border: none; height: 0px; margin: 0px; padding: 0px; position: relative; visibility: visible; width: 697px; background-color: transparent; overflow: hidden; opacity: 0;"><iframe width="697" height="175" frameborder="0" marginwidth="0" marginheight="0" vspace="0" hspace="0" allowtransparency="true" scrolling="no" allowfullscreen="true" onload="var i=this.id,s=window.google_iframe_oncopy,H=s&amp;&amp;s.handlers,h=H&amp;&amp;H[i],w=this.contentWindow,d;try{d=w.document}catch(e){}if(h&amp;&amp;d&amp;&amp;(!d.body||!d.body.firstChild)){if(h.call){setTimeout(h,0)}else if(h.match){try{h=s.upd(h,i)}catch(e){}w.location.replace(h)}}" id="aswift_4" name="aswift_4" style="left:0;position:absolute;top:0;border:0px;width:697px;height:175px;"></iframe></ins></ins></ins></div> <p>我已经为我的脚本添加了<code>build-bundle</code>,以便我可以运行<code>npm run build-bundle</code>来创建我的库包。</p> <p><span class="img-wrap"><img data-src="/img/bVbb2qI?w=800&amp;h=185" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="图片描述" title="图片描述" style="cursor: pointer;"></span><br />这会产生类似于以下的输出:</p> <p><span class="img-wrap"><img data-src="/img/bVbb2qH?w=800&amp;h=198" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="图片描述" title="图片描述" style="cursor: pointer;"></span><br />对于CodeSandbox示例,输入文件应该如下所示:</p> <p><span class="img-wrap"><img data-src="/img/bVbb2qG?w=786&amp;h=596" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="图片描述" title="图片描述" style="cursor: pointer;"></span></p> <h3 id="articleHeader1">第2步 - 指向package.json中的输出文件</h3> <p>为了确保<code>package.json</code>中的<code>main</code>属性正确指向输出文件。 我更喜欢使用<code>commonjs</code>包。</p> <p><span class="img-wrap"><img data-src="/img/bVbb2qF?w=600&amp;h=90" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="图片描述" title="图片描述" style="cursor: pointer;"></span></p> <h3 id="articleHeader2">第3步 - 以用户身份在npm上添加/登录</h3> <p>确保你在npm上注册。 <code>npm adduser</code>注册一个新用户和<code>npm login</code>作为一个现有用户登录。</p> <h3 id="articleHeader3">第4步 - 验证npm用户凭证</h3> <p>输入<code>npm whoami</code>来验证你的用户名。</p> <h3 id="articleHeader4">第5步 - 命名你的组件库</h3> <p>为你的包选择一个名字,你必须确保它尚未被使用。 确保把它放在你的package.json中。</p> <p><span class="img-wrap"><img data-src="/img/bVbb2qE?w=540&amp;h=58" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="图片描述" title="图片描述" style="cursor: pointer;"></span></p> <h3 id="articleHeader5">第6步 - 构建</h3> <p>通过执行在第1步中添加的程序包脚本来构建捆绑软件。</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" npm run build-bundle " title="" data-original-title="复制"></span> </div> </p></div> <pre class="bash hljs"><code class="bash"> npm run build-bundle </code></pre> <h3 id="articleHeader6">第7步 - 在npm上发布组件库</h3> <p>运行<code>npm publish</code> --<code>access public</code>来发布该库供公众访问。</p> <p>就是这样。 你完成了在npm上发布你的Vue组件库!</p> <h3 id="articleHeader7">第8步 - 如何使用你新发布的库</h3> <p>从npm安装组件库并将组件导入代码中。 安装:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" npm install --save [你的库名] " title="" data-original-title="复制"></span> </div> </p></div> <pre class="bash hljs"><code class="bash"> npm install --save [你的库名] </code></pre> <p>其中[你的库名]是你在第5步中给出的库的名称。</p> <p>在你的<code>main.js</code>或类似的入口点,只需使用以下命令导入你的库:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" import '你的库名'; " title="" data-original-title="复制"></span> </div> </p></div> <pre class="bash hljs"><code class="bash"> import <span class="hljs-string">'你的库名'</span>; </code></pre> <p>现在,你可以开始使用你的组件了,因为我们在第一步中全局注册了这些组件。</p> <p><span class="img-wrap"><img data-src="/img/bVbb2qD?w=800&amp;h=163" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="图片描述" title="图片描述" style="cursor: pointer;"></span></p> <p>对于我们的示例组件<code>Banner</code>,当我们注册组件时,组件名称为FlockBanner。 所以,你可以直接在你的模板中使用它:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" <flock-banner>这是你的Banner是示例</flock-banner><br /> " title="" data-original-title="复制"></span> </div> </p></div> <pre class="xml hljs"><code class="html"> <span class="hljs-tag">&lt;<span class="hljs-name">flock-banner</span>&gt;</span>这是你的Banner是示例<span class="hljs-tag">&lt;/<span class="hljs-name">flock-banner</span>&gt;</span> </code></pre> <p>使用上面提到的组件库查看实例:<a href="https://codesandbox.io/s/n9n7yy2lwp" rel="nofollow noreferrer" target="_blank">https://codesandbox.io/s/n9n7...</a></p> <p>整个过程我们就完成了。 在Vue.js团队提出CLI版本3后,构建自己的组件库以便重用变得非常容易。 如果觉得这个流程有点帮助,点个赞呗,同时也支持下<a href="https://fundebug.com/" rel="nofollow noreferrer" target="_blank">Fundebug</a>哦!</p> <h3 id="articleHeader8">关于Fundebug</h3> <p><a href="https://www.fundebug.com/" rel="nofollow noreferrer" target="_blank">Fundebug</a>专注于JavaScript、<a href="http://www.js-code.com/tag/%e5%be%ae%e4%bf%a1%e5%b0%8f%e7%a8%8b%e5%ba%8f" title="微信小程序" target="_blank">微信小程序</a>、微信小游戏、支付宝小程序、<a href="http://www.js-code.com/tag/react" title="React" target="_blank">React</a> Native、Node.js和Java实时BUG监控。 自从2016年双十一正式上线,Fundebug累计处理了9亿+错误事件,得到了Google、360、金山软件、百姓网等众多知名用户的认可。欢迎免费试用!</p> <p><span class="img-wrap"><img data-src="/img/remote/1460000016902244?w=400&amp;h=225" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="" title="" style="cursor: pointer;"></span></p> <h3 id="articleHeader9">版权声明</h3> <p>转载时请注明作者<a href="https://www.fundebug.com/" rel="nofollow noreferrer" target="_blank">Fundebug</a>以及本文地址:<br /><a href="https://blog.fundebug.com/2018/06/08/vuejs-component-on-npm/" rel="nofollow noreferrer" target="_blank">https://blog.fundebug.com/2018/06/08/vuejs-component-on-npm/</a></p> <p></code></p>

总结

以上是脚本宝典为你收集整理的

如何使用@vue/cli 3.0在npm上创建,发布和使用你自己的Vue.js组件库

全部内容,希望文章能够帮你解决

如何使用@vue/cli 3.0在npm上创建,发布和使用你自己的Vue.js组件库

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过