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

如何使用vue写一个组件库

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p><code></p> <h2 id="articleHeader0">如何使用vue写一个组件库</h2> <h3 id="articleHeader1">新建vue项目</h3> <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> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="vue init webpack VueComponent cd VueComponent npm install npm run dev" title="" data-original-title="复制"></span> </div> </p></div> <pre class="bash hljs"><code class="bash">vue <a href="http://www.js-code.com/tag/in" title="浏览关于“in”的文章" target="_blank" class="tag_link">in</a>it webpack <a href="http://www.js-code.com/tag/vue" title="浏览关于“Vue”的文章" target="_blank" class="tag_link">Vue</a>Component <span class="hljs-built_in">cd</span> VueComponent npm inst<a href="http://www.js-code.com/tag/all" title="浏览关于“all”的文章" target="_blank" class="tag_link">all</a> npm run dev</code></pre> <p>以上就新建好了一个vue项目</p> <h3 id="articleHeader2">项目目录</h3> <p>首先,定义好目录,经过观察大多数的组件库,基本是这样的目录:</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> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="|-- examples // 用于demo展示 |-- packages // 用于编写存放组件" title="" data-original-title="复制"></span> </div> </p></div> <pre class="bash hljs"><code class="bash">|-- examples // 用于demo展示 |-- <a href="http://www.js-code.com/tag/packages" title="浏览关于“packages”的文章" target="_blank" class="tag_link">packages</a> // 用于编写存放组件</code></pre> <p>因为修改了目录名称,就需要修改下webpack的配置文件,修改编辑目录<br />build/webpack.bash.config.js</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> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="{ test: /.js$/, loader: 'babel-loader', include: [resolve('examples'), resolve('test'), resolve('node_modules/webpack-dev-server/client'),resolve('packages')] }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="bash hljs"><code class="bash">{ <span class="hljs-built_in">test</span>: /.js$/, loader: <span class="hljs-string">'<a href="http://www.js-code.com/tag/babel" title="浏览关于“babel”的文章" target="_blank" class="tag_link">babel</a>-loader'</span>, include: [resolve(<span class="hljs-string">'examples'</span>), resolve(<span class="hljs-string">'test'</span>), resolve(<span class="hljs-string">'<a href="http://www.js-code.com/tag/node" title="浏览关于“node”的文章" target="_blank" class="tag_link">node</a>_modules/webpack-dev-server/client'</span>),resolve(<span class="hljs-string">'<a href="http://www.js-code.com/tag/package" title="浏览关于“package”的文章" target="_blank" class="tag_link">package</a>s'</span>)] }</code></pre> <p>将编译目录指向examples和packages。</p> <h3 id="articleHeader3">写一个组件</h3> <p>在packages下面创建一个Button组件,目录如下(目录构建都是参照ele-ui)</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> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="|-- examples |-- packages | |--Button | |--src | | |--main.vue // 编写组件内容 | |-- index.js // 导出组件" title="" data-original-title="复制"></span> </div> </p></div> <pre class="bash hljs"><code class="bash">|-- examples |-- packages | |--Button | |--src | | |--main.vue // 编写组件内容 | |-- index.js // 导出组件</code></pre> <p>main.vue内容:</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> <span type="<a href="http://www.js-code.com/tag/button" title="浏览关于“button”的文章" target="_blank" class="tag_link">button</a>" class="copyCode code-tool" data-toggle="tooltip" data-placement="<a href="http://www.js-code.com/tag/top" title="浏览关于“top”的文章" target="_blank" class="tag_link">top</a>" data-clipboard-<a href="http://www.js-code.com/tag/text" title="浏览关于“text”的文章" target="_blank" class="tag_link">text</a>="<template> </p> <div class=&quot;M_button&quot;> button按钮组件 </div> <p> </template> <script> <a href="http://www.js-code.com/tag/export" title="浏览关于“export”的文章" target="_blank" class="tag_link">export</a> <a href="http://www.js-code.com/tag/default" title="浏览关于“default”的文章" target="_blank" class="tag_link">default</a>{ <a href="http://www.js-code.com/tag/name" title="浏览关于“name”的文章" target="_blank" class="tag_link">name</a>: 'MButton', // 定义这个组件的名称 } </script>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="bash hljs"><code class="bash">&lt;template&gt; &lt;<a href="http://www.js-code.com/tag/div" title="浏览关于“div”的文章" target="_blank" class="tag_link">div</a> class=<span class="hljs-string">"M_button"</span>&gt; button按钮组件 &lt;/div&gt; &lt;/template&gt; &lt;script&gt; <span class="hljs-built_in">export</span> default{ name: <span class="hljs-string">'MButton'</span>, // 定义这个组件的名称 } &lt;/script&gt;</code></pre> <p>index.js内容:</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> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="import Button from './src/main.vue'; // 在每个组件下面定义一个install方法。 Button.install = function (Vue) { Vue.component(Button.name, Button); }; export default Button;" title="" data-original-title="复制"></span> </div> </p></div> <pre class="bash hljs"><code class="bash">import Button from <span class="hljs-string">'./src/main.vue'</span>; // 在每个组件下面定义一个install方法。 Button.install = <span class="hljs-keyword"><a href="http://www.js-code.com/tag/function" title="浏览关于“function”的文章" target="_blank" class="tag_link">function</a></span> (Vue) { Vue.component(Button.name, Button); }; <span class="hljs-built_in">export</span> default Button;</code></pre> <p>到此,就完成了一个组件的简单编写</p> <h3 id="articleHeader4">导出组件</h3> <p>组件写好之后,需要让组件支持全局引入和按需引,在packages下面新建一个index.js文件,用于将组件导出<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> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="import Button from './button/index.js'; // 引入组件 const components = [ Button ]; //'vue-use是调用的install方法' const install = function(Vue) { if (install.installed) return; components.map(component => Vue.component(component.name, component)); }; if (typeof window !== 'undefined' &amp;&amp; window.Vue) { console.log('传入参数install方法') install(window.Vue); } export default { install, // 如果在外面使用vue.use的话,就会默认使用install方法 Button };" title="" data-original-title="复制"></span> </div> </p></div> <pre class="bash hljs"><code class="bash">import Button from <span class="hljs-string">'./button/index.js'</span>; // 引入组件 <a href="http://www.js-code.com/tag/const" title="浏览关于“const”的文章" target="_blank" class="tag_link">const</a> components = [ Button ]; //<span class="hljs-string">'vue-use是调用的install方法'</span> const install = <span class="hljs-keyword">function</span>(Vue) { <span class="hljs-keyword"><a href="http://www.js-code.com/tag/if" title="浏览关于“if”的文章" target="_blank" class="tag_link">if</a></span> (install.installed) <span class="hljs-built_in"><a href="http://www.js-code.com/tag/return" title="浏览关于“return”的文章" target="_blank" class="tag_link">return</a></span>; components.map(component =&gt; Vue.component(component.name, component)); }; <span class="hljs-keyword">if</span> (<a href="http://www.js-code.com/tag/typeof" title="浏览关于“typeof”的文章" target="_blank" class="tag_link">typeof</a> <a href="http://www.js-code.com/tag/window" title="浏览关于“window”的文章" target="_blank" class="tag_link">window</a> !== <span class="hljs-string">'<a href="http://www.js-code.com/tag/undefined" title="浏览关于“undefined”的文章" target="_blank" class="tag_link">undefined</a>'</span> &amp;&amp; win<a href="http://www.js-code.com/tag/do" title="浏览关于“do”的文章" target="_blank" class="tag_link">do</a>w.Vue) { console.log(<span class="hljs-string">'传入参数install方法'</span>) install(window.Vue); } <span class="hljs-built_in">export</span> default { install, // 如果在外面使用vue.use的话,就会默认使用install方法 Button };</code></pre> <p>这里为什么要定义一个install方法呢?看下vue源码</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> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="import { toArray } from '../util/index' export function initUse (Vue: GlobalAPI) { Vue.use = function (plugin: Function | Object) { const installedPlugins = (this._installedPlugins || (this._installedPlugins = [])) if (installedPlugins.indexOf(plugin) > -1) { return this } // additional parameters const args = toArray(arguments, 1) args.unshift(this) &#x26a0;&#xfe0f; if (typeof plugin.install === 'function') { &#x26a0;&#xfe0f; plugin.install.apply(plugin, args) } else if (typeof plugin === 'function') { plugin.apply(null, args) } installedPlugins.push(plugin) return this } }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="bash hljs"><code class="bash">import { to<a href="http://www.js-code.com/tag/array" title="浏览关于“Array”的文章" target="_blank" class="tag_link">Array</a> } from <span class="hljs-string">'../util/index'</span> <span class="hljs-built_in">export</span> <span class="hljs-keyword">function</span> initUse (Vue: Global<a href="http://www.js-code.com/tag/api" title="浏览关于“API”的文章" target="_blank" class="tag_link">API</a>) { Vue.use = <span class="hljs-keyword">function</span> (<a href="http://www.js-code.com/tag/plugin" title="浏览关于“plugin”的文章" target="_blank" class="tag_link">plugin</a>: Function | <a href="http://www.js-code.com/tag/Object" title="浏览关于“Object”的文章" target="_blank" class="tag_link">Object</a>) { const installedPlugins = (<a href="http://www.js-code.com/tag/this" title="浏览关于“this”的文章" target="_blank" class="tag_link">this</a>._installedPlugins || (this._installedPlugins = [])) <span class="hljs-keyword">if</span> (installedPlugins.indexOf(plugin) &gt; -1) { <span class="hljs-built_in">return</span> this } // additional parameters const args = toArray(<a href="http://www.js-code.com/tag/arguments" title="浏览关于“arguments”的文章" target="_blank" class="tag_link">arguments</a>, 1) args.unshift(this) &#x26a0;&#xfe0f; <span class="hljs-keyword">if</span> (typeof plugin.install === <span class="hljs-string">'function'</span>) { &#x26a0;&#xfe0f; plugin.install.apply(plugin, args) } <span class="hljs-keyword"><a href="http://www.js-code.com/tag/else" title="浏览关于“else”的文章" target="_blank" class="tag_link">else</a></span> <span class="hljs-keyword">if</span> (typeof plugin === <span class="hljs-string">'function'</span>) { plugin.apply(<a href="http://www.js-code.com/tag/null" title="浏览关于“null”的文章" target="_blank" class="tag_link">null</a>, args) } installedPlugins.push(plugin) <span class="hljs-built_in">return</span> this } }</code></pre> <p>由此可见,vue.use是调用传入的组件的instll方法。这也就解释了,为什么每个组件都定义了一个install方法。</p> <h3 id="articleHeader5">使用组件</h3> <p>在examples的main.js里面引入组件:</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> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="import MVUI from '../packages/index' Vue.use(MVUI) " title="" data-original-title="复制"></span> </div> </p></div> <pre class="bash hljs"><code class="bash">import MVUI from <span class="hljs-string">'../packages/index'</span> Vue.use(MVUI) </code></pre> <p>到此,一个非常简单的组件就写好了。</p> <p></code></p>

总结

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

如何使用vue写一个组件库

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

如何使用vue写一个组件库

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

80%的人都看过