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

使用element UI+nuxt+vue项目踩过的坑

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p><code></p> <p>公司要做一个后台管理的框架,基于之前用过的技术,本来打算直接用vue+element的,但是为了配合集成微服务,又加了Nuxt.js,首先了解下nuxt是什么,我们从官网可以看到。<br /> Nuxt.js 是一个基于 <a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>.js 的通用应用框架。<br /> 通过对客户端/服务端基础架构的抽象组织,Nuxt.js 主要关注的是应用的 UI渲染。<br /> 具体不加赘述,直接上坑。<br /> 1:开发项目需要区分开发环境与测试环境,nuxt也是使用webpack进行打包,基于习惯我们会先下载插件cross-env,然后如图</p> <p><span class="img-wrap"><img data-src="/img/bVbaIrk?w=606&amp;h=278" src="/img/bVbaIrk?w=606&amp;h=278" alt="clipboard.png" title="clipboard.png" style="cursor: pointer; display: inline;"></span><br />一般使用这个后,只需要判断process.env.NODE_ENV就好,nuxt默认写死了process.env.NODE_ENV,每次start的时候会重新改掉配置,所以我们需要在env中,用另一个参数来接收process.env.NODE_ENV</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><span class="img-wrap"><img data-src="/img/bVbaIrS?w=383&amp;h=73" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="clipboard.png" title="clipboard.png" style="cursor: pointer;"></span><br />这个坑找了很多资料,最后在一个大神的博客下看到这种写法了,地址不太记得。<br /> 2:第二个坑是element的坑,我们的后台管理需要从头部选择一级菜单,左侧加载一级二级菜单,等于动态加载菜单,使用el-menu 的default-active有时候能高亮有时候不能,找了GitHub上一个大神的处理方法<a href="http://www.js-code.com/tag/this" title="浏览关于“this”的文章" target="_blank" class="tag_link">this</a>.$refs.菜单ref名字.activeIndex</p> <p></code></p>

总结

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

使用element UI+nuxt+vue项目踩过的坑

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

使用element UI+nuxt+vue项目踩过的坑

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

80%的人都看过