2019 Vue开发指南:你都需要学点啥?

转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。
原文出处:https://dzone.com/articles/vue-development-in-2019-what-you-need-to-know

如果您是Vue开发的新手,您可能已经听过很多关于它的专业术语了,例如:单页面应用程序、异步组件、服务器端呈现等。

另外您可能还经常听到和Vue一起提到的工具和库,如Vuex、Webpack、Vue CLI和Nuxt。

也许您在面对这些未知的术语和工具时会感到无助和绝望,没关系,您并不孤单,因为这是所有新手在初次接触Vue时都会有的感受。

但如果您试图要一次掌握所有这些内容,那么这些庞大的体系很可能会压垮你。为此,我在这里将为大家展示一个“知识图表”,它包含了所有在专业Vue开发过程中的关键部分。您可以参考这个图为您在2019学习Vue的过程中指引方向。

0. JavaScript和Web开发基础

如果我让你用英文去阅读纯英文书籍,那么你应该先要学习英文,对吗?

同样,Vue是一个用于构建Web用户界面的JavaScript框架。在开始使用Vue之前,您至少必须先要掌握JavaScript和Web开发的基础知识。

1. Vue的基础概念

如果您是一个Vue的萌新开发,您应该专注于Vue.js 生态系统的核心,其中包括Vue核心库,Vue Router和Vuex。因为这些工具将会在绝大部分的Vue应用程序中应用。好的,那我们开始介绍关于Vue的一些基础概念。

Vue核心功能

在基础情况下,Vue将网页和JavaScript保持同步,实现这一目标的特性是响应式数据及指令和插值等模板功能,这些都是第一天要学习的内容。

在构建你的第一个Vue应用之前,你还必须要去了解如何在网页中去安装/使用Vue,以及了解Vue的引用实例的生命周期。

组件

Vue的组件是可重复使用,并相互独立的UI元素。您需要了解,如何声明组件,以及如何通过属性和事件使组件间通信。

并且学会组合组件也同样重要,因为这关乎着你是否能够使用Vue构建出一个健壮、可扩展应用程序。

单页面应用程序

单页面应用程序(SPA)架构决定了您创建的Web页面一样能够展示和多页面网站一样丰富的内容,且不会当用户在点击链接后重新加载整个页面等这样低效的行为。

一旦您将您的“页面”创建成了一个Vue组件,您可以为每一个组件使用Vue Router,将每个请求映射到一个唯一的访问路径上,Vue Router是一个由Vue团队维护的用于构建单页面应用程序(SPA)的工具。

状态管理

随着项目规模越来越庞大, SPA的许多页面上将会有越来越多的组件,管理全局状态也将变得越发棘手,组件因为大量的属性和事件监听器而变得臃肿。

一种称为“Flux”的特殊模式可将您的数据保存在稳定的中央存储中。Vuex库也由Vue团队维护,可祝您在Vue.js 应用程序中实现Flux。

2. 生产环境中的Vue

您从第一部分获得的所有知识都可用于构建高性能和高效的Vue应用程序,虽然是允许在你的本地服务器上,那么,如何确保他们能够在实际生产环境下运行呢?

如果您要把基于Vue.js 的产品推向用户,您还需要了解更多内容,以下将为您介绍。

项目脚手架

如果您需要经常构建Vue应用程序,您会发现几乎每个项目都会提供配置、设置和开发人员工具。

Vue团队维护了一个名为Vue CLI的工具,它可以让您在几分钟内构建一个强大的Vue开发环境。

全栈 / 认证应用程序

Vue应用通常是数据驱动型的用户界面,数据通常是由Node、Laravel、Rails、Django

或其他服务器框架编写的安全API作为来源。

也许数据是由传统的REST API或GraphQL提供,再或者是Web Socket提供的实时数据。

另外你还应该熟悉通常用于将Vue集成到全堆栈配置中的设计模式,以及在Vue应用程序中保护用户数据安全的各种注意事项。

如果您正在评估什么后端产品是您开发Vue应用时的最好选择,那么这篇文章中应该有您的答案。

测试

如果您想保证您的Vue应用程序在生产环境中表现的既可维护又稳定,您需要对您的应用提供完成的测试。

在Vue应用程序中,单元测试可确保您的组件始终为给定的输入(属性或用户输入的内容)提供相同的属除(渲染好的HTML或事件)。

Vue团队维护着一个名为Vue Test Utils的工具,它允许您能对组件单独的创建和执行测试过程。

优化

当您将应用程序部署到远程服务器后,这个应用的访问速度和执行效率很可能不会像在开发阶段表现的那样迅速,很可能当用户访问时速度会很慢。

为了提升效率,我们需要优化您的Vue应用,优化的过程我们可以采用各种技术,包括服务端渲染。在服务端渲染中,Vue程序将在服务端执行,在用户访问时,将渲染完成的HTML呈现给用户,从而达到提升访问速度的目的。

当然,还包括其他优化技术,例如:异步组件和渲染功能。

3. 关键工具

到目前为止,我们所看到的一切都来自Vue.js核心,或来自生态系统中的工具。但Vue不是孤立存在的,它只是前端技术栈中其中的一块。

高级开发中不应该仅仅熟悉Vue,还要熟悉一些其他关键工具,因为它可能将成为未来Vue应用其中的一部分。

现代JavaScript和Babel

ES5可以有效构建Vue应用程序,ES5几乎是所有浏览器都支持的JavaScript标准。

为了增强Vue的开发体验,并使用最新的浏览器功能,您可以使用最新的JavaScript

标准ES2015的特性或ES2016及更高版本的建议功能来构建您的Vue应用程序。

如果选择使用了最新的JavaScript特性,那么其中旧版浏览器将会出现兼容问题,这会造成您的产品将会损失掉一部分用户。

而如何对旧浏览器做兼容呢? Babel 可以实现这个目的,它的职责就是在应用程序发布前将您应用程序中现代特性“转换”(翻译和编译)为标准功能。

Webpack

Webpack是一个模块打包工具,意思是如果您的代码跨不同模块编写的(例如,不同的JavaScript文件),Webpack也可以全部将这些内容“构建”到一个浏览器可读的单个文件中。

Webpack 还可以构建流水线,它允许您在构建代码前进行转换。例如,使用前面铁道的Babel,Sass或TypeScript,还可以使用一系列插件来优化您的应用程序。

许多开发者认为Webpack很难理解,也很难配置,但如果没有它,Vue的一些最棒的功能(如:单页面组件)将无法实现。我们有关于WebPack的系列教程,助您快速掌握Webpack的使用和配置。

TypeScript

TypeScript是JavaScript语言的超集,它包含了(String,Boolean,Number等)。有了这样的类型定义,能保证您在开发期间就能编写出健壮和稳定的代码,能尽早发现错误。

即将于2019年推出的Vue.js 3将完全用TypeScript开发,这并不意味着您必须在Vue项目中使用它。但假如您需要通过阅读Vue的内部代码并加入Vue的开源组织为其贡献力量,您至少也是应该要了解TypeScript这个语言的。

4. Vue框架

基于Vue创建的框架,使您无需从头开始实现服务端渲染,创建自己的组件库以及其他类似的工作。

目前有许多优秀的Vue框架,但在这,我们只列出了应用在不同领域最为广泛的三个框架。

Nuxt.js

如果你想要构建一个高性能的Vue应用程序,同时还要基于路由、服务端呈现、代码分离和其他前沿特性,同时还需要一些更高级的功能,例如:SEO标记等。您可以使用Nuxt.js框架。

Nuxt.js框架通过其丰富的社区插件提供了所有这些开箱即用的特性,以及更多的特性,如PWA等。

Vuetify

Google的Material Design标准是一个广泛使用的设计语言指南系统,它用于构建漂亮并合理的用户界面,这些界面被广泛应用于Google的产品,如Android和Web系统。

Vuetify框架在一系列Vue组件中实现了Material Design。这允许您使用Material Design布局和样式快速创建Vue应用程序,并在应用程序中实现模态框、提示框、导航栏、分页等页面小控件。

NativeScript-Vue

Vue.js 是一个用于构建Web用户界面的库。如果您想将他用于构建移动应用,您可以使用NativeScript-Vue框架。

NativeScript是一个使用iOS和Android上原生用户界面组件构建应用app的框架,而NativeScript-Vues 是基于NativeScript且支持Vue语法和Vue组件使用的框架。

5. 其他

在最后一部分中,我们将介绍一些重要但不包含在上述分类中的内容。

插件开发

如果您要在项目中重用Vue功能,或为Vue生态做出贡献,您可以把这部分功能打包成插件并发布给其他用户。

插件功能是Vue的一个重要特性,有很多工具和模板可以帮助您创建轻便高效的Vue代码。

动画

动画也是 Vue核心功能的一部分,它允许您在向DOM中添加或删除元素时应用动画。 为了启用一个动画,您可以创建CSS类来定义所需的动画效果,无论是淡入淡出、更改颜色还是任何其他效果。Vue将检测当添加元素和删除元素时,添加或删除您设置相应的类。

渐进式Web应用程序

渐进式Web应用程序(PWA)与普通的Web应用程序类似,但用户体验、性能已经得到了增强,同时还增加了现代功能,例如,PWA包括离线缓存、服务端渲染、通知推送等。

大部分PWA功能可以通过Vue CLI 3插件或主入Nuxt.js之类的框架轻松添加到Vue应用中,但您最好仍然需要去学习其中的关键技术,包括Web应用json清单(minifest)和服务等技术。

扩展控件

您的应用中如包含有电子表格、报表、数据分析、金融图表、在线表格编辑器等需求。可以尝试使用葡萄城的SpreadJS纯前端表格控件WijmoJS纯前端开发工具包,这两款控件工具都完美兼容Vue,可使您的应用为用户带来更稳定、更高效的使用体验。

原文地址:https://www.cnblogs.com/powertoolsteam/p/11056531.html

时间: 2024-07-29 22:56:42

2019 Vue开发指南:你都需要学点啥?的相关文章

[转帖]2019 简易Web开发指南

2019 简易Web开发指南 2019年即将到来,各位同学2018年辛苦了. 不管大家2018年过的怎么样,2019年还是要继续加油的! 在此我整理了个人认为在2019仍是或者将成为主流的技术与大家分享,包括前端.后端和全栈相关. 工具.软件 欲先攻其事必先利其器,用好工具是做好开发的基础. 编辑器/IDE: VSCode,Sublime Text,Atom 浏览器:Chrome,Firefox 设计/原型:Adobe XD,Photoshop,Sketch,Figma 命令行工具:Git Ba

jbpm开发指南例子中helloworld的helloWorld.xml抛错问题(连个例子都跑不起

jbpm开发指南例子中helloworld的helloWorld.xml抛错问题(连个例子都跑不起 我按照JBPM开发指南上的例子把 // ProcessDefinition processDefinition = ProcessDefinition.parseXmlString( // "<process-definition>" + // " <start-state>" + // " <transition to='s'

web前端开发都要学什么,有前途吗?

web前端开发现在如此火爆,可以说是引领了IT培训行业的一个潮流,那么web前端开发都要学些什么知识呢?为什么这么火有前途吗?现在行业很需要这种人才吗?还是大家盲目跟风,随大流,下面小编对web前端做了具体的研究,给出以下建议与结论. 首先可以告诉你:WEB前端开发时代才刚刚开始! 为什么这么说呢?其实web前端这个职位,并没有一个有效的历史记录可以查询,更没有一个明确的定义,她不像java工程师.ios开发这种一开始就有明确定位的工种一样,是有核心技能可以描述的.比如java开发,顾名思义就是

关于《Swift开发指南》背后的那些事

时间轴(倒叙)2014年8月底在图灵出版社的大力支持下,全球第一本全面.系统.科学的,包含本人多年经验的呕心沥血之作<Swift开发指南>(配有同步视频课程和同步练习)全线重磅推出2014年7月5日苹果宣布Swift语言二十天后,<Swift开发指南>第一稿交予图灵出版社2014年6月9日苹果宣布Swift语言三天后,启动<Swift开发指南>撰写2014年6月2日凌晨1点(北京时间:)在苹果开发者大会WWDC 2014上,苹果宣布了全新的iOS及OS X平台开发语言S

Knockout应用开发指南

第一章:入门 1.Knockout简介 (Introduction) Knockout是一个轻量级的UI类库,通过应用MVVM模式使JavaScript前端UI简单化. Knockout有如下4大重要概念: 声明式绑定 (Declarative Bindings):使用简明易读的语法很容易地将模型(model)数据关联到DOM元素上. UI界面自动刷新 (Automatic UI Refresh):当您的模型状态(model state)改变时,您的UI界面将自动更新. 依赖跟踪 (Depend

《node.js开发指南》读后感

<node.js开发指南>这部只有180多页的书,我花了一个多月的业余时间算是粗略看完了.中间因为公司项目的加班,中断了几次.大大拖累进度,现在空出来时间,写一点自己的小小感想吧. 先从缺点开始: 我认为最大缺点就是老了.node是一个快速变化的东东,这本书上的内容,在现在的node上出现了很大的分叉.比如,书中提到安装node的时候,使用系统的apt-get或yum工具安装.可是这样安装之后的node.js的终端工具是nodejs,而不是node.这个就导致了一个新的问题,在这本书中的后一节

开发指南专题七:JEECG微云快速开发平台查询HQL过滤器

开始学习wxWidgets,上一篇写了"安装wxWidgets遭遇的两大关卡"(简称"前文"). 先推荐一下这两天找到的学习材料. 博客中有一个系列教程,貌似作者没有写完,见<跟我学wxWidgets开发>系列教程. 要看书,就<使用wxWidgets进行跨平台程序开发>.我给的链接中,包括中书中的源码.这本书,是<Cross Platform GUI Programming With wxWidget>的中译本,译本中没有附录部

WatchKit-Programming-Guide-Apple-Watch开发指南官方翻译及总结

鉴于CSDN的Markdown很多bug,大家请看这里: WatchKit-Programming-Guide-Apple-Watch开发指南官方翻译及总结 Overview ### Developing for Apple Watch Apple Watch可以让用户以一种很私密,不招摇的样式查看信息(官方文档是这样的哈,但是我想大多数人不会不招摇的查看Apple Watch上的信息??).用户可以在不拿出手机的情况下,通过查看Apple Watch快速的获取重要的信息. Apple Watc

开源|ns4_frame分布式服务框架开发指南

导语:宜信于2019年3月29日正式开源nextsystem4(以下简称"NS4")系列模块.此次开源的NS4系列模块是围绕当前支付系统笨重.代码耦合度高.维护成本高而产生的分布式业务系统解决方案.NS4系列框架允许创建复杂的流程/业务流,对于业务服务节点的实现可串联,可分布式.其精简.轻量,实现了"脱容器"(不依赖tomcat.jetty等容器)独立运行.NS4系列框架的设计理念是将业务和逻辑进行分离,开发人员只需通过简单的配置和业务实现就可以实现逻辑复杂.性能高