<p><code></p> <blockquote> <p>iview与element都是与vue配合使用的ui框架,用法与配置基本一致,在此,我以iview为例,教你如何起步。<br />*首先,你需要有一定的vue基础,如果你还是个小白,可以去我之前介绍如何搭建一个vue项目先看看,点击下面的链接就OK了<br /><a href="http://www.jianshu.com/p/866999e513ef" rel="nofollow noreferrer" target="_blank">http://www.jianshu.com/p/866999e513ef</a><br /><a href="http://www.jianshu.com/p/866999e513ef" rel="nofollow noreferrer" target="_blank">vue.js使用vue-cli搭建...</a></p> </blockquote> <h1 id="articleHeader0">1.安装</h1> <blockquote> <p>安装:方式有俩种</p> </blockquote> <h4>[1]:CDN 引入</h4> <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="<!-- 引入css样式 --> <link rel=&quot;stylesheet&quot; href=&quot;//unpkg.com/iview/dist/styles/iview.css&quot;> <!-- 引入组件库 --><br /> <script src=&quot;//unpkg.com/iview/dist/iview.min.js&quot;></script>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-comment">&lt;!-- 引入css样式 --&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"stylesheet"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"//unpkg.com/iview/dist/styles/iview.css"</span>&gt;</span> <span class="hljs-comment">&lt;!-- 引入组件库 --&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"//unpkg.com/iview/dist/iview.min.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre> <h4>[2]:npm安装</h4> <blockquote> <p>这种方式是一般实际开发所用的方式,所以如果你刚开始,我还是比较推荐这个,下面是安装以及引入的详细流程</p> </blockquote> <h1 id="articleHeader1">2.npm安装</h1> <blockquote> <p>在你的项目路径下执行命令 <code>$ npm install iview --save ---安装ui框架文件</code></p> </blockquote> <p>安装成功后,就可以在项目文件下的 <a href="http://www.js-code.com/tag/node" title="node" target="_blank">node</a>_modules文件下看见iview文件</p> <p><span class="img-wrap"><img data-src="/img/remote/1460000009919813?w=488&amp;h=83" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="Paste_Image.png" title="Paste_Image.png" style="cursor: pointer;"></span></p> <p><span class="img-wrap"><img data-src="/img/remote/1460000009919814?w=379&amp;h=152" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="Paste_Image.png" title="Paste_Image.png" style="cursor: pointer;"></span></p> <blockquote> <p>ok,如果你看见iview文件,你已经安装成功了</p> </blockquote> <h1 id="articleHeader2">3.在你引入的项目的main.js文件进行配置</h1> <blockquote> <p>在你的main.js输入以下代码,引入iview</p> </blockquote> <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 iView from 'iview'; import 'iview/dist/styles/iview.css'; ---引入其css" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code><span class="hljs-keyword">import</span> iView <span class="hljs-keyword">from</span> <span class="hljs-string">'iview'</span>; <span class="hljs-keyword">import</span> <span class="hljs-string">'iview/dist/styles/iview.css'</span>; ---引入其css</code></pre> <p>当然,还有必不可少的一部,在vue的机制下,我们必须对其进行全局引用<br /><code><a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>.use(iView);</code></p> <h1 id="articleHeader3">4.使用ui组件,展示 效果</h1> <blockquote> <p>完成以上步骤后,就好办啦,进入iview官网,将你需要的ui组件copy下来paste入你的页面就ok啦</p> </blockquote> <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=" <Button type=&quot;success&quot; long>确认提交</Button></p> <p> <Button type=&quot;error&quot; long>确认删除</Button>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code> <span class="hljs-tag">&lt;<span class="hljs-name">Button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"success"</span> <span class="hljs-attr">long</span>&gt;</span>确认提交<span class="hljs-tag">&lt;/<span class="hljs-name">Button</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">Button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"error"</span> <span class="hljs-attr">long</span>&gt;</span>确认删除<span class="hljs-tag">&lt;/<span class="hljs-name">Button</span>&gt;</span></code></pre> <p>比如我在官网copy下来俩个按钮的code,放置在我的页面</p> <p><span class="img-wrap"><img data-src="/img/remote/1460000009919815?w=281&amp;h=112" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="Paste_Image.png" title="Paste_Image.png" style="cursor: pointer;"></span></p> <blockquote> <p>如果你的页面和上门的图片一样,出现iview的button组件,恭喜你,已经成功安装并引用了</p> </blockquote> <h1 id="articleHeader4">5.建议</h1> <blockquote> <p>以上内容只是为了帮助初学者进行简单的起步,在实际开发中,其实会有很多的坑与问题,毕竟实战的环境更为复杂,so,我建议大家遇到问题还是要多看看api,当然,也要多余我交流哦。^_^,如果我的文字对你有用,记得点心关注我,给一点点动力支撑。</p> </blockquote> <blockquote> <p>再附上一个工作之余做的小demo,高仿饿了么app,如果你有兴趣,在里面可以和我交流更多的东西,demo实现了vue-router,vue-resource,还有组件的复用,vue的动画实现,better-scroll实现联动效果等等等,实现一些更接近实战的效果,而且,我会在工作之余进行不断的优化,实现更多的效果,点击下面的链接就好啦</p> </blockquote> <p><a href="https://github.com/PaiDaXingSWK/elema.git" rel="nofollow noreferrer" target="_blank">https://github.com/PaiDaXingSWK/elema.git</a><br /><a href="https://github.com/PaiDaXingSWK/elema.git" rel="nofollow noreferrer" target="_blank">点我进入demo</a></p> <p></code></p>

本文固定链接: http://www.js-code.com/vue-js/vue-js_26099.html