2019 Vue开发指南：你都需要学点啥？

假如您是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，还可以行使一系列插件来优化您的应用措施。

（编辑：河北网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!