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

最简单的Vue.js入门方法

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p><code></p> <blockquote><p>最近花了几天看了下vue, 确实vue相对于其他两大前端框架来说,学习成本会低很多。 文档、社区、资料都很完善。下面是我觉得还不错的学习路径,希望对你有帮助。</p></blockquote> <p>传统的前端项目开发最大的问题是没法<strong>工程化</strong>和<strong>模块化</strong>。 css跟js(<a href="http://www.js-code.com/tag/es6" title="浏览关于“es6”的文章" target="_blank" class="tag_link">es6</a>之前)本身不支持模块化开发,也就导致了代码文件没法按功能拆分、组合、压缩优化,这在大型项目的开发上制造了很多麻烦。另外在<strong>大前端</strong>日趋火热的当下,为了写一次接口能适配到不同端(PC、wap、<a href="http://www.js-code.com/tag/android" title="浏览关于“android”的文章" target="_blank" class="tag_link">android</a>、<a href="http://www.js-code.com/tag/ios" title="浏览关于“ios”的文章" target="_blank" class="tag_link">ios</a>、桌面应用、小程序.etc),<strong>前后端分离</strong>也是必不可少。基于以上原因,使用一款成熟的前端框架,对于前端项目开发来说是很有必要的,能很大的提高生产力。</p> <p>如果你对前端工程化不慎了解的话建议先看看这篇文章: <a href="https://github.com/fouber/blog/issues/10" rel="nofollow noreferrer" target="_blank">前端工程化</a></p> <p>Ok,在明白了前端框架的必要性后,我们就要开始学习vue.js了。</p> <p>学习vue.js的前提是掌握了 html/js/css,这块应该没什么难度,大家很容易就能掌握。<br />接下来需要掌握<strong>ES6</strong>, 这是大前提<strong>一定要懂,一定要懂,一定要懂</strong>, 推荐阅读阮一峰的 <a href="http://es6.ruanyifeng.com/" rel="nofollow noreferrer" target="_blank">ES6入门</a><br />接着你需要去了解一下webpack, 推荐阅读这篇 <a href="https://segmentfault.com/a/1190000006178770">入门 Webpack,看这篇就够了</a></p> <p>在了解es6跟webpack之后,就可以正式进入我们的vue.js学习之旅了。<br />首先通读一下官网的教程<a href="https://cn.vuejs.org/v2/guide/index.html" rel="nofollow noreferrer" target="_blank">官方教程</a>, 看的期间要跟着敲代码。 官方教程的内容还是蛮多的,有些内容也不是很好理解。所以看不懂就跳过。 这一步我们只要知道vue有什么功能就行了。<br />看完了之后,再去看一下 <a href="https://router.vuejs.org/zh/" rel="nofollow noreferrer" target="_blank">Vue Router</a>, 路由这个功能开发中也是必要的。<br />最后再看下<a href="https://cli.vuejs.org/zh/" rel="nofollow noreferrer" target="_blank">Vue CLI</a>, 正式开发的时候我们都是用这个工具来构建项目。</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>OK,官方教程看完,<strong>我相信你还是很迷</strong>,到底怎么使用vue去开发一个项目,心里还是没底。 没关系,接下来我们就找找视频教程实战,练练手。<br />视频的话可以到<strong>腾讯课堂</strong>上面看(我发现这里有免费的实战视频,其他地方好像都收费。)<br />我这里推荐个视频 <a href="https://ke.qq.com/course/339723" rel="nofollow noreferrer" target="_blank">Vue实战-景点介绍小应用</a>,通过这个视频你基本能明白怎么样使用vue、vue-cli、vue-router去开发一个项目。</p> <p>恭喜你,做完以上操作,估计几天也过去了, 你也算入门vue了。 接下来呢,你可以以视频+github案例的方式继续深入学习<a href="http://www.js-code.com/tag/vue" title="浏览关于“Vue”的文章" target="_blank" class="tag_link">Vue</a>.js。<br />这里我推荐个不错的demo <a href="https://github.com/bailicangdu/vue2-elm" rel="nofollow noreferrer" target="_blank">vue2-elm</a></p> <p>PS:本文为什么没提及vuex, 是因为vuex对入门来说不是必要的。</p> <p></code></p>

总结

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

最简单的Vue.js入门方法

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

最简单的Vue.js入门方法

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

80%的人都看过