您的位置:首页>>电脑软件

Vue开发者指南:2019你最需要学些什么?

发布时间:2019-07-08 17:23:21  来源:互联网    背景:

  作为 Vue 的初学者,您或许已经听过很多关于它的专业术语了,例如:单页面应用程序、异步组件、服务器端呈现等,您可能还听过和Vue经常一起被提到的工具和库,如Vuex、Webpack、Vue CLI和Nuxt。

  面对这些海量、未知的专业术语和工具,您很可能会感到无助和绝望,没关系,这是所有新手在初次接触Vue时都会有的感受。

  Vue庞大的体系和生态,很可能会让您无所适从。为了便于您更清晰的理解Vue的体系架构,在这里我将为您展示 “2019年Vue开发者知识图谱”,它包含了所有 Vue 开发过程中的关键部分。您可以参考这个图谱,为您在未来学习Vue的框架指引方向。

  0. JavaScript和Web开发基础

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

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

  1. Vue的基本概念

  如果您是一名Vue的萌新开发者,您应该更专注于Vue.js 生态系统的核心,它包括Vue核心库、Vue Router和Vuex。因为这些工具将会在绝大部分的Vue应用程序中出现。

  Vue核心功能

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

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

  组件

  Vue的组件是可重复使用、且相互独立的UI元素。您首先需要学习,如何声明组件,及如何通过属性和事件使组件间达成通信。同时,学会组合组件也同样重要,这决定了你能否使用Vue构建出一个健壮、可扩展的Web应用程序。

  单页面应用程序

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

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

  状态管理

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

  为应对上述情况,你的需要开始了解Vue的状态管理:一种被称为“Flux”的特殊模式,可将您的数据保存在稳定的中央存储中。Flux可通过Vuex库来实现,该库由Vue团队维护。

  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应用程序,也几乎是所有浏览器都支持的JavaScript标准。

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

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

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

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

  Webpack

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

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

  许多开发者认为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用户界面的UI库。如果您想将他用于构建移动应用,可以使用NativeScript-Vue框架。

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

  5. 支持Vue的控件/组件

  如果您想在项目中快速构建基于Vue的功能模块,如类似Excel功能和布局的电子表格、前端导入导出Excel、在Web应用程序中嵌入在线Excel、数据分析OLAP、金融图表等,您可以使用一些成熟的商业化开发工具,纯前端表格控件SpreadJS 和 前端开发工具包WijmoJS。

  纯前端表格控件SpreadJS:https://www.grapecity.com.cn/developer/spreadjs

  SpreadJS 是一款基于 HTML5 的纯 JavaScript 电子表格和网格功能控件,以高速低耗、纯前端、零依赖为产品特色,可嵌入任何操作系统,满足 .NET、Java、响应式 Web 应用及移动跨平台的表格数据处理和类 Excel 的表格应用开发,实现在线 Excel 体验。

  SpreadJS 在数据展示、前端导入导出、图表面板、数据绑定等场景无需大量代码开发和测试,可极大节省企业研发成本并降低交付风险。

  前端开发工具包WijmoJS:https://www.grapecity.com.cn/developer/wijmojs

  WijmoJS 前端开发工具包由多款灵活高效、零依赖、轻量级的纯前端控件组成,如表格控件FlexGrid、图表控件 FlexChart、数据分析 OLAP 等,完美支持原生 JavaScript,以及Angular、React、Vue、TypeScript、Knockout 和 Ionic 等框架,可用于企业快速构建桌面、移动 Web 应用程序。

  WijmoJS 凭借其先进的体系架构、简单易学的使用文档、超过 500 种 Demo 演示、顶级的控件性能,以及轻松、易用的操作体验,可全面满足企业前端开发所需,是构建企业级 Web 应用程序最高效的纯前端开发工具包。

  6. 其他项目

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

  插件开发

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

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

  动画

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

  渐进式Web应用程序(PWA)

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

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

  扩展控件

  在您的Web应用中,如有电子表格、报表、数据分析、金融图表、在线表格编辑等需求,可以使用上文提到的支持Vue框架的控件和组件包,除了无需考虑兼容性问题外,这些控件可使您的Web应用为用户带来更稳定、更高效的使用体验。

  关于葡萄城https://www.grapecity.com.cn/

  赋能开发者!葡萄城公司成立于 1980 年,是全球领先的集开发工具、商业智能解决方案、管理系统设计工具于一身的软件和服务提供商。西安葡萄城是其在中国的分支机构,面向全球市场提供软件研发服务,并为中国企业的信息化提供国际先进的开发工具、软件和研发咨询服务。葡萄城的控件和软件产品在国内外屡获殊荣,在全球被数十万家企业、学校和政府机构广泛应用。

特别提醒:本网内容转载自其他媒体,目的在于传递更多信息,并不代表本网赞同其观点。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,并请自行核实相关内容。本站不承担此类作品侵权行为的直接责任及连带责任。如若本网有任何内容侵犯您的权益,请及时联系我们,本站将会在24小时内处理完毕。


返回网站首页 本文来源:互联网

本文评论
友情提示:评论功能暂时关闭,请扫描上方二维码进群交流!
为国产办公应用正名 万兴PDF专家软件评测
近年来,国产办公效率类软件快速崛起,各式各样的办公效率类软件进入职场,但是,就选择一款使用方...
日期:08-21
万兴PDF专家评测:消除PDF文档使用痛点,强大功能终将 成为“爆款”软件
时光荏苒,岁月如梭,转眼间酷热难耐的夏天已经带着一丝不舍向我们挥手道别,而“立秋”...
日期:08-21
CRM进入工作手机时代 讯众通信要进入CRM领域?
最初,销售管理就是填各种表,后来引入销售管理软件,开始信息化管理。有了移动互联网之后,销售管...
日期:08-20
妙笔2.0升级系统不容小觑,快速抓住传播营销新趋势
2019年8月,在蓝色光标AD大会上,妙笔智能公司正式推出了智能撰稿机器人2.0系统。在该系统下,通过"...
日期:08-16
这个 WPS 高效功能,让你轻松制作高水平简历
目前,正值招聘的黄金时期「秋招季」,各大企业的集中招聘正在火热展开。如何能在千百位应聘者中脱...
日期:08-15
听音乐时不想收到语音消息 讯飞输入法语音输入更方便看
近日,微博#用手机听音乐时收到语音消息#这一话题备受关注。相信很多手机听歌收到微信语音时的内心O...
日期:08-09
“轻量化”成趋势,办公OA系统如何选择?
“轻量化”,本是汽车生产技术之一,可以做到保证汽车基本性能的情况下,降低重量提高操...
日期:08-09
索泰发布新款迷你PC:搭载9代酷睿和RTX显卡
8月8日消息 索泰今天发布了MAGNUS E系列ZBOX迷你PC,62.2毫米厚,搭载9代英特尔酷睿处理器和NVIDIA ...
日期:08-08
AMD 霄龙发布会现场实拍:双路EPYC,超大被动散热器
8月8日消息 旧金山时间8月7日下午,AMD召开发布会,正式推出了7nm EPYC 7002系列处理器,最高64核12...
日期:08-08
万物互联时代,一款远程控制软件的十年进化之路
远程控制作为一种新兴的互联网操作方式,正在成为一种潮流。
日期:08-07
破解数字化转型的密码  用友2019全球企业服务大会即将揭幕
如今,云计算、大数据、5G、AI人工智能、IoT物联网等新兴技术突飞猛进,已经成为改变生活、产业和社...
日期:08-02
这个高效神器,让你的PPT字体更好看
相信不少小伙伴们都知道,字体对于PPT制作、宣传海报设计而言,重要性不言而喻,字体若是使用得当,...
日期:08-02
迅雷破解版盘点,VIP破解版无限加速去广告统统不靠谱!
提到下载电影、游戏、软件等,相信不少小伙伴都想到迅雷,作为一款装机必备的软件,网上也流传着很...
日期:08-02
十年远控品牌向日葵亮相海纳汇,助力物联网企业数字化
2019年7月20日,海纳汇联盟年度全国巡展第六站在杭州成功举办。
日期:07-29
货架革命,如何拿下终端货架高地?
数据显示,
  每位消费者在超市每个终端展示货架前平均停留15秒,
  75%的人会在5秒...
日期:07-25
简单3步解决文档丢失?试试WPS高效办公小妙招《四》
决定职场人升职加薪的主要因素除老板外,还有你的工作文档。为什么呢?因为这些文档也是你工作成果最...
日期:07-25
科创板开市大涨引股民抢投,腾讯手机管家精准查杀5款病毒炒股APP
近日,科创板鸣锣开市,首批25只新股正式在上交所开始交易,开盘全部大涨,甚至有的涨幅达520%,上...
日期:07-24
有人打电话喊你投资《星球大战9》,腾讯手机管家精准拦截诈骗电话
《星球大战》在全球拥有数以亿计的粉丝,其天行者系列终章《星球大战9》在前段时间宣布12月20日在北...
日期:07-15
二三四五好压防护文件安全 MD5校验成亮点
​二三四五好压自上线以来,因其“小、快、轻、便”的特点,在众多压缩软件中独树一帜。...
日期:07-12
Vue开发者指南:2019你最需要学些什么?
作为 Vue 的初学者,您或许已经听过很多关于它的专业术语了,例如:单页面应用程序、异步组件、服务...
日期:07-08
  专栏介绍
王涵 的专栏
王涵发表的文章
积分:
自我介绍 :