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

Vue学习路线图

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<h1 id="articleHeader0"><a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a> 概述</h1> <p>如果你是一名 <a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a> 开发新手,可能已经听过很多行话术语,比如单页面应用程序、异步组件、服务器端渲染等等,或者还听说过与 <a href="http://www.js-code.com/tag/vue" title="浏览关于“Vue”的文章" target="_blank" class="tag_link">Vue</a> 有关的一些工具和库,比如 Vuex、Webpack、Vue CLI 和 Nuxt。</p> <p>那么究竟什么是Vue,有什么作用?</p> <p>Vue.js是一套用于构建用户界面的渐进式框架,主要用于快速的构建前端界面,与其它大型的前端框架不同,Vue被设计为可以自底向上逐层应用。</p> <p>相比<a href="http://www.js-code.com/tag/angular" title="Angular" target="_blank">Angular</a>.js来说,Vue的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合,是初创项目的前端首选框架。另一方面,当与现代化的工具链以及各种支持类库结合使用时,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:175px;margin:0;padding:0;position:relative;visibility:visible;width:697px;background-color:transparent;"><ins id="aswift_4_anchor" style="display:block;border:none;height:175px;margin:0;padding:0;position:relative;visibility:visible;width:697px;background-color:transparent;"><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>单独来说,Vue.js是一个用于构建用户界面的前端库,本身就具有响应式编程和组件化的诸多优点。所谓响应式编程,即是一种面向数据流和变化传播的编程范式,可以在编程语言中很方便地表达静态或动态的数据流,而相关的计算模型会自动将变化的值通过数据流进行传播。</p> <p>响应式编程在前端开发中得到了大量的应用,在大多数前端MVX框架都可以看到它的影子。相比较于<a href="http://www.js-code.com/tag/angular" title="Angular" target="_blank">Angular</a>.js和<a href="http://www.js-code.com/tag/react" title="React" target="_blank">React</a>.js而言,Vue.js并没有引入太多的新概念,只是对已有的概念进行了精简。并且,Vue.js很好的借鉴了<a href="http://www.js-code.com/tag/react" title="React" target="_blank">React</a>.js的组件化思想,使应用开发起来更加容易,真正实现了模块化开发的目的。</p> <p>相比于<a href="http://www.js-code.com/tag/angular" title="浏览关于“Angular”的文章" target="_blank" class="tag_link">Angular</a>.js和<a href="http://www.js-code.com/tag/react" title="浏览关于“React”的文章" target="_blank" class="tag_link">React</a>.js而言,Vue.js一直以轻量级、易上手而被人称道。MVVM的开发模式也使前端从传统的<a href="http://www.js-code.com/tag/dom" title="DOM" target="_blank">DOM</a>操作中释放出来,开发者不需要再把时间浪费在视图和数据的维护上,只需要关注data的变化即可。并且,Vue的渲染层基于轻量级的virtual-<a href="http://www.js-code.com/tag/dom" title="DOM" target="_blank">DOM</a>实现,在大多数的场景下初始化速度和内存消耗都提高2-4倍。同时,越来越多的移动客户端也开始支持使用Vue.js来进行开发,可以坚信使用Vue.js打造三端一致的Native应用将变成可能。</p> <p>作为一个新兴的前端框架,Vue.js大量借鉴和参考了Angular.js和React.js等优秀的前端框架。而在版本支持上,Vue.js抛弃了对IE8的支持,对移动端的支持也有一定的要求,也即是说使用Vue.js进行移动跨平台开发时需要Android 4.2+和iOS 7+支持。</p> <p>如果读者所在的项目是一个前后端分离的项目,亦或者是一个创业项目,想使用Vue.js打造三端一致的Native体验,那么Vue.js将是一个不错的选择。</p> <h1 id="articleHeader1">Vue 线路图</h1> <p>俗话说,一口气吃不成胖子。对于一个新手,又如何学习Vue呢?还需要如何进阶呢?又需要掌握哪些高级知识?为了解答这些疑问,下面看一张Vue的技能图。<br /><span class="img-wrap"><img data-src="/img/remote/1460000017342119?w=1164&amp;h=1036" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="在这里插入图片描述" title="在这里插入图片描述" style="cursor: pointer;"></span></p> <h2 id="articleHeader2">JavaScript 与Web基础</h2> <p>Vue 作为一个用于构建 Web 用户界面的 JavaScript 框架,在开始使用 Vue 之前,你必须了解 JavaScript 和 Web 开发的基础知识。</p> <p>并且还需要掌握一些 Vue.js 生态系统的核心知识,包括 Vue 核心库、Vue Router 和 Vuex。</p> <h3 id="articleHeader3">Vue 核心功能</h3> <p>从根本上说,Vue 就是一个用于同步网页的JavaScript技术框架。实现这一目标的关键特性是反应式(reactive)数据,以及指令和插值等模板功能。</p> <p>要构建一个 Vue 应用程序,你还需要知道如何在网页中安装 Vue,并了解 Vue 实例的生命周期等知识。</p> <h3 id="articleHeader4">组件</h3> <p>其次,Vue 组件是独立的可重用 UI 元素。因此,你需要了解如何声明组件,以及如何通过 prop 和 event 在它们之间发生交互。</p> <p>了解如何组合组件也很重要,因为这对使用 Vue 构建健壮、可伸缩的应用程序来说至关重要。</p> <h3 id="articleHeader5">单页面应用程序</h3> <p>单页面应用程序(SPA)架构通过单个网页实现传统多页面网站一样的功能,而且不会在每次用户触发导航时重新加载和重建页面。</p> <p>在将“页面”构建为 Vue 组件之后,就可以使用 Vue Router 将每个“页面”映射到一个唯一的路径,Vue Router 是一个用于构建 SPA 的工具,由 Vue 团队维护。</p> <h3 id="articleHeader6">状态管理</h3> <p>随着应用程序变得越来越大,项目变得越来越复杂,SPA 页面中会有很多组件,管理全局状态变得异常困难,而且随着 prop 和 event 监听器的增加,组件变得越来越臃肿。</p> <p>这时候,一种称为Flux的特殊模式就出现了,它可以将数据保存在可预测且稳定的中央存储中。由 Vue 团队维护的 Vuex 库可以帮助你在 Vue.js 应用程序中实现 Flux。</p> <h2 id="articleHeader7">实战中的Vue</h2> <h3 id="articleHeader8">脚手架</h3> <p>如果你经常构建 Vue 应用程序,你会发现几乎每个项目都需要提供配置、设置和开发者工具。</p> <p>Vue 团队维护了一个叫作 Vue CLI 的工具,让你可以在几分钟内启动一个强大的 Vue 开发环境。</p> <h3 id="articleHeader9">全栈应用程序</h3> <p>在实际开发中,真实的 Vue 应用程序通常是由数据来驱动用户界面渲染的。数据通常来自使用 Node、Laravel、Rails、Django 或其他服务器框架开发的 <a href="http://www.js-code.com/tag/api" title="API" target="_blank">API</a>。</p> <p>这些数据可能是由传统的 REST <a href="http://www.js-code.com/tag/api" title="API" target="_blank">API</a> 或 GraphQL 提供的数据,也可能是通过 Web 套接字提供的实时数据。</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_5_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_5_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_5" name="aswift_5" style="left:0;position:absolute;top:0;border:0px;width:697px;height:175px;"></iframe></ins></ins></ins></div> <p>所以,你还需要了解将 Vue 集成到完整技术栈中常用设计模式,以及确保 Vue 应用程序用户数据的安全性。</p> <h3 id="articleHeader10">测试</h3> <p>如果你想开发出可维护且稳定的 Vue 应用程序,你还需要对它们进行测试(如单元测试、快照测试、黑盒测试等)。</p> <p>在 Vue 应用程序中,可以通过单元测试来确保你的组件能够为给定输入(即 prop 或用户输入)提供相同的输出(即重新渲染的 <a href="http://www.js-code.com/tag/html" title="HTML" target="_blank">HTML</a> 或发出的事件)。</p> <p>Vue 团队维护了一个叫作 Vue Test Utils 的工具,用于测试单独的 Vue 组件。</p> <h3 id="articleHeader11">优化</h3> <p>当你将应用程序部署到远程服务器并且用户通过慢连接访问它时,它与你在开发环境中测试的速度和效率是不一样的。</p> <p>为了优化 Vue 应用程序,我们可以采用各种技术,包括服务器端渲染,也就是在服务器端执行 Vue 应用程序,然后输出 <a href="http://www.js-code.com/tag/html" title="HTML" target="_blank">HTML</a> 页面并传给用户。其他优化手段还包括使用异步组件和渲染函数。</p> <h2 id="articleHeader12">开发工具</h2> <p>俗话说,磨刀不误砍柴工,写代码也一样,掌握Vue开发相关的工具和脚手架,可以大大的提高开发效率。</p> <h3 id="articleHeader13">JavaScript 和 Babel</h3> <p>要获得增强的 Vue 开发体验,并利用新的浏览器功能,你可以使用最新的 JavaScript 标准 ES2015 和 ES2016 或更高版本提供的功能来构建 Vue 应用程序。</p> <p>不过,如果你选择使用现代 JavaScript,就需要提供一种支持旧版浏览器的方法,否则你的产品可能无法为大多数用户提供服务。</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_6_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_6_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_6" name="aswift_6" style="left:0;position:absolute;top:0;border:0px;width:697px;height:175px;"></iframe></ins></ins></ins></div> <p>要实现这一目的,您可以使用 Babel。它的作用是在应用程序发布之前将你的现代功能“转换”(翻译和编译)为标准语法,如将ES6翻译为浏览器能够识别的ES5。</p> <h3 id="articleHeader14">WebPack</h3> <p>Webpack 是模块捆绑器,如果你的代码跨越了不同模块(例如不同的 JavaScript 文件),Webpack 可以将这些零散的代码“构建”到浏览器可读的单个文件中。</p> <p>Webpack 还可以作为构建管道,你可以在构建代码之前对代码进行转换,例如使用 Babel、Sass 或 TypeScript,还可以使用一系列插件来优化你的应用程序。</p> <p>很多开发人员觉得 Webpack 难以掌握,配置起来也很麻烦,但如果没有它,将无法使用 Vue 的一些有用的功能(如单文件组件)。</p> <p>最近发布的 Vue CLI 3 提供了一种用于在 Vue 项目中抽象和自动配置 Webpack 的解决方案。</p> <p>这是否意味着你不需要学习 Webpack 了?当然不是,因为你仍然不可避免地需要进行定制或调试 Webpack 配置。</p> <h3 id="articleHeader15">TypeScript</h3> <p>TypeScript 是 JavaScript 语言的超集,本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。为我们提供了类型(如String、Boolean、Number 等),这样我们就可以编写健壮的代码,并尽早发现错误。</p> <p>将于 2019 年推出的Vue.js 3版本 ,将完全使用 TypeScript 编写。因此学习TypeScript显得很有必要。</p> <h2 id="articleHeader16">Vue 的框架</h2> <p>构建在 Vue 之上的框架可以让你无需从头开始实现服务器端渲染,还可以创建自己的组件库以及定制很多其他常见的任务。</p> <h3 id="articleHeader17">Nuxt.js</h3> <p>如果你想要构建一个高性能的 Vue 应用程序,就需要基于组件的路由、服务器端渲染、代码拆分和其他功能进行实习。</p> <p>Nuxt.js 作为一个基于 Vue.js 的轻量级应用框架,可用来创建服务端渲染 (SSR) 应用,也可充当静态站点引擎生成静态站点应用,具有优雅的代码结构分层和热加载等特性。</p> <p>Nuxt.js 通过各种社区插件提供了这些开箱即用的功能,以及更多的功能选项,如 PWA。</p> <h3 id="articleHeader18">Vuetify</h3> <p>谷歌的 Material Design 是一个使用十分广泛的页面<a href="http://www.js-code.com/tag/%e6%a0%b7%e5%bc%8f%e6%8c%87%e5%8d%97" title="样式指南" target="_blank">样式指南</a>,用于构建漂亮的逻辑用户界面,并被用在谷歌的产品(如 Android 和 Web)当中。</p> <p>Vuetify 在一系列 Vue 组件中实现了 Material Design。因此,你可以使用 Material Design 布局和样式快速构建 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_7_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_7_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_7" name="aswift_7" style="left:0;position:absolute;top:0;border:0px;width:697px;height:175px;"></iframe></ins></ins></ins></div> <p>Vuetify支持SSR(服务端渲染),SPA(单页应用程序),PWA(渐进式web应用程序)和标准<a href="http://www.js-code.com/tag/html" title="浏览关于“HTML”的文章" target="_blank" class="tag_link">HTML</a>页面。</p> <h3 id="articleHeader19">NativeScript-Vue</h3> <p>Vue.js 是一个用于构建 Web 用户界面的库。如果你想将它用于原生移动界面,可以使用 NativeScript-Vue 框架。</p> <p>NativeScript 是一个用于在 iOS 和 Android 上使用原生用户界面组件构建应用程序的系统,而 NativeScript-Vue 是一个基于 NativeScript 的框架,提供了 Vue 的语法和组件的使用方式。</p> <h1 id="articleHeader20">其他</h1> <h3 id="articleHeader21">插件开发</h3> <p>如果要在项目中重用 Vue 功能或为 Vue 生态系统做贡献,可以将功能作为 Vue 插件来开发。</p> <h3 id="articleHeader22">动画</h3> <p>如果你需要使用动画,那么你需要了解一下 Vue 的过渡系统,它也是 Vue 核心的一部分。你可以通过在向 <a href="http://www.js-code.com/tag/dom" title="浏览关于“DOM”的文章" target="_blank" class="tag_link">DOM</a> 添加元素或从 DOM 中删除元素时应用动画。</p> <p>你需要创建 <a href="http://www.js-code.com/tag/css" title="CSS" target="_blank">CSS</a> 类来定义所需的动画效果,无论是淡入淡出、更改颜色还是你喜欢的其他方式。当向 DOM 中添加元素或从 DOM 中删除元素时,Vue 会检测到这些变更,并在过渡期间添加或删除相应的 <a href="http://www.js-code.com/tag/css" title="CSS" target="_blank">CSS</a> 类。</p> <h3 id="articleHeader23">渐进式 Web 应用程序</h3> <p>渐进式 Web 应用程序(PWA)就像普通的 Web 应用程序一样,只是加入了改进的用户体验。例如,PWA 可能包括脱机缓存、服务器端渲染、推送通知等。</p> <p>大多数 PWA 功能可以通过 Vue CLI 3 插件或使用 Nuxt.js 等框架添加到 Vue 应用程序中,但你仍然需要了解一些关键技术,包括 Web App Manifest 和 ServiceWorker。</p> <p>如果你对PWA有兴趣,那么推荐您查看一些<a href="https://developers.google.com/web/progressive-web-apps/" rel="nofollow noreferrer" target="_blank">PWA的官网介绍</a>。</p>

总结

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

Vue学习路线图

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

Vue学习路线图

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

80%的人都看过