vue知识点梳理总结,vue项目知识点详解
本文主要介绍Vue开发指南的关键知识。对Vue框架感兴趣的同学可以参考一下。
目录
概述0。JavaScript和Web开发的基本概念1。Vue核心功能组件单页应用的状态管理2。生产环境中Vue项目搭建的全栈/认证应用测试优化3。关键工具现代JavaScript和BabelWebpackTypeScript 4 1。Vue框架nuxt。jsvuetifyscript-vue5。其他插件开发动画渐进式web应用程序。
概述
如果你是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路由器、Vuex。因为这些工具将在大多数Vue应用中使用。好，那我们来介绍一些关于Vue的基本概念。
Vue核心功能
在基本情况下，Vue保持网页与JavaScript同步。实现这一目标的特征是响应数据和模板功能，如指令和插值。这些都是第一天要学的内容。
在构建您的第一个Vue应用程序之前，您还必须知道如何在网页中安装/使用Vue，并且知道Vue引用实例的生命周期。
组件
Vue的组件是可重用的独立UI元素。您需要知道如何声明组件，以及如何通过属性和事件在组件之间进行通信。
而且学习如何组装组件也同样重要，因为这关系到你能否使用Vue构建一个健壮的、可扩展的应用。
单页面应用程序
单页应用(SPA)架构决定了你创建的网页可以像多页网站一样展示丰富的内容，不会出现用户点击链接后重新加载整个页面这样的低效行为。
一旦您创建了作为Vue组件的“页面”,您就可以为每个组件使用Vue Router来将每个请求映射到一个唯一的访问路径。Vue路由器是由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还可以构建管道，这允许您在构建代码之前进行转换。比如使用之前railway的Babel、Sass或者TypeScript，也可以使用一系列插件来优化你的应用。
很多开发者认为Webpack很难理解和配置，但是没有它，Vue的一些最好的特性，比如单页组件，就无法实现。我们有一系列关于WebPack的教程，帮助你快速掌握Webpack的使用和配置。
TypeScript
TypeScript是JavaScript语言的超集，包含(字符串、布尔、数字等。).使用这种类型定义，您可以在开发过程中编写健壮而稳定的代码，并尽早发现错误。
将于2019年推出的Vue.js 3将完全使用TypeScript开发，这并不意味着你必须在Vue项目中使用它。但是如果你需要通过阅读Vue的内部代码，加入它的开源组织来为Vue做贡献，你至少应该知道语言TypeScript。
4. Vue框架
基于Vue创建的框架，让你无需从头实现服务器端渲染，创建自己的组件库等类似工作。
目前有很多优秀的Vue框架，但这里只列出在不同领域应用最广泛的三个框架。
Nuxt.js
如果要构建一个高性能的Vue应用，也要基于路由、服务器端渲染、代码分离等前沿特性，还需要一些更高级的功能，比如SEO标签。可以使用Nuxt.js框架。
Nuxt.js框架通过其丰富的社区插件提供了所有这些开箱即用的特性，以及更多的特性，如PWA。
Vuetify
Google的材料设计标准是一个广泛使用的设计语言指南系统，用于构建美观合理的用户界面。这些接口广泛应用于谷歌的产品中，比如Android和Web系统。
Vue化框架在一系列Vue组件中实现材质设计。这允许您使用Material Design布局和样式快速创建Vue应用程序，并在应用程序中实现小型页面控件，如模式框、提示框、导航栏和分页。
NativeScript-Vue
Vue.js是一个用于构建Web用户界面的库。如果想用它来构建移动应用，可以使用NativeScript-Vue框架。
NativeScript是在iOS和Android上使用原生用户界面模块构建应用程序的框架，而NativeScript-Vues是基于NativeScript的框架，支持Vue语法和Vue组件的使用。
5. 其他
在最后一部分，我们将介绍一些上述类别中没有包括的重要内容。
插件开发
如果你想在一个项目中重用Vue功能或者为Vue生态系统做贡献，你可以把这些功能打包成插件，发布给其他用户。
插件是Vue的一个重要特性。有许多工具和模板可以帮助您创建轻便高效的Vue代码。
动画
动画也是Vue核心功能的一部分，它允许您在向DOM添加或删除元素时应用动画。要启用动画，您可以创建CSS类来定义所需的动画效果，无论是淡入淡出、改变颜色还是任何其他效果。Vue会检测到在添加和删除元素时，会添加或删除你设置的对应类。
渐进式Web应用程序
渐进式Web应用程序(PWA)类似于常见的Web应用程序，但用户体验和性能得到了增强，并且还添加了现代功能。比如PWA包括离线缓存、服务器端渲染、通知推送等等。
大多数PWA功能可以通过Vue CLI 3插件或main entry Nuxt.js等框架轻松添加到Vue应用中，但你最好还是学习其中的关键技术，包括Web应用json manifest (minifest)和服务等技术。
以上是Vue开发指南关键知识梳理的详细内容。更多关于Vue的信息，请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。