原文：https://itnext.io/mocking-global-objects-in-vue-test-utils-a8822df013a8
原文：https://itnext.io/testing-the-composition-api-fae3bae3f592
最近公司在推行单元测试，但是一些同事对于单元测试只是了解，甚至不怎么了解。因此推动单元测试的阻碍是有的，这种阻碍除了人的层面，还有基础设施的层面。希望通过本文，一方面加深大家对前端测试最佳实践的认知，另一方面可以作为手册，在日常开发中做参考。本文也会不断更新，期待你的参与。
从使用 Vue 写出第一个 Hello world 到现在已经有近两年时间了，期间利用业余时间折腾了一套组件 we-vue，起初是出于实践学到的新知识，更多的是玩的意思，不过后来维护的过程中渐渐积累了一些经验，并开始享受这种过程。 在 we-vue 更新到 v2.0 的时候，开始全面地编写单元测试。起先使用 karma + mocha + chrome-headless 这种组合完成的行级覆盖率达到 96% 的测试。但最近，我又放弃了这种组合，转而使用 Jest。在这连番的折腾中，入过不少坑（当然，很多时
携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第2天，点击查看活动详情
该版本包含一些实质性的内部改进-其中最显著的是重写了模板解析器，速度提高了 2 倍，还重构了反应性系统，使效果触发更准确、更高效。此外，它还对 API 进行了一系列质量改进，包括稳定了 defineModel 和绑定道具时的新同名简称。
代码集成到主分支需要经过一系列的自动化测试，当测试都通过之后，方可执行自动化部署，否则不能完成集成。这说明了自动化测试的重要性，我们不能等测试工程师去发现问题。
Vue3 跟 Vite 正式版发布有很长一段时间了，生态圈也渐渐丰富起来，作者已在多个项目中使用，总结一下：就是快！也不用担心稳定性问题，开发体验真不是一般好！还没尝试的同学可以从本文开始学习，从 0 开始手把手带你搭建一套基于 Vite + Vue3 + TypeScript 规范的前端工程化项目环境。
框架设计远没有大家想的那么简单，并不是说只把功能开发完成，能用就算完事儿了，这里面还是有很多学问的。比如说，我们的框架应该给用户提供哪些构建产物？产物的模块格式如何？当用户没有以预期的方式使用框架时是否应该打印合适的警告信息从而提升更好的开发体验，让用户快速定位问题？开发版本的构建和生产版本的构建有何区别？热跟新（HMR：Hot Module Replacement）需要框架层面的支持才行，我们是否也应该考虑？再有就是当你的框架提供了多个功能，如果用户只需要其中几个功能，那么用户是否可以选择关闭其他功能从而减少资源的打包体积？所有以上这些问题我们都会在本节内容进行讨论。
在 4 月 21 日晚，Vue 作者尤雨溪在哔哩哔哩直播分享了Vue.js 3.0 Beta最新进展。以下是直播内容整理
在 Nuxt.js 3 中，一个应用程序的文件夹结构具有一定的规范性。以下是 Nuxt.js 3 的文件夹结构及其用途的详细解释：
官网虽有测试例子，但涉及较窄，遇到组件中存在异步传参、触发 action、获取 state 等问题时，编写单元测试便不知从哪下手。
在 React 和 Vue 之间存在许多相似性。Vue 的设计理念充分汲取了 Angular 和 React 的优点并将它们结合起来，所以如果你真的特别喜欢 React 所拥有的每个特性，那么在Vue 中同样可以发现它们。但是，React 和 Vue 之间除了拥有很多相似性，还有很多差异性。这里所指的差异性不包含所有细微的差异 —— 语法差异、方法名称差异 —— 仅包含那些在框架基本层面中所体现的差异性。
vs code打开项目你会发现根目录下有一目录test/unit，里面就有一个已经生成的测试用例。
Vue-Test-Utils 是 Vue.js 官方的单元测试实用工具库，它提供了一系列的 API 来使得我们可以很便捷的去写 Vue 应用中的单元测试。
那么如何实现上面功能呢？本文先简单实现一个异常处理方法，然后结合 Vue3 源码中的实现详细介绍，最后总结实现异常处理的几个核心。
划重点：Vue 3 将在 2022 年 2 月 7 日 成为新的默认版本！ 请务必阅读文末的 可能需要采取的措施 部分，来确认你是否需要在默认版本切换之前做相应改动以避免发生异常。
在最开始的时候，Vue 仅仅是一个运行时库。但这些年来，它已经逐步发展成了一个包含许多子项目的框架：
近日，尤雨溪宣布：Vue 3 将在 2022 年 2 月 7 日成为新的默认版本。
Vue.js 框架作者尤雨溪宣布：Vue 3 将在 2022 年 2 月 7 日成为新的默认版本。
请务必阅读文末的 可能需要采取的措施 部分，来确认你是否需要在默认版本切换之前做相应改动以避免发生异常。
现在，将全局改变Vue行为的全局API移至由新的createApp方法创建的应用程序实例，并且它们的影响现在仅限于该应用程序实例。
摘要： Fundebug 的 JavaScript 错误监控插件同步支持 Vue.js 异步错误监控。
作者：HelloGitHub-小鱼干 摘要：找对路子，事半功倍，正如本周 GitHub Trending #刷 LeetCode# 主题想表达的那般，正确的学习姿势方能让人走得更远，走进大厂 ?。
2.7 是 Vue 2.x 的最终版本。在这个版本之后，Vue 2 进入了 LTS（长期支持），从现在开始持续 18 个月，并且将不再接收新功能。这意味着Vue 2 将在 2023 年底结束生命周期。
原文：https://medium.com/js-dojo/unit-testing-vue-router-1d091241312
这是一个基于 vue-cli 生成的项目，可以直接使用 vue add xxx 进行插件的安装。
原文：https://github.com/tonylua/vue-testing-handbook/blob/master/src/zh-CN/vue-router.md
此篇文章为一篇说明文档，不是教你从零构建一个后台管理系统，而是基于一个实际项目，已经搭建好了一个后台管理系统的基础框架，教你如何在此基础上快速开发自己的后台管理系统，能让读者能在掌握一些基础知识的情况下，也能上手 vue 后台开发。只有接触项目，才能更好地理解自己所学知识的意义，触类旁通把死知识点变成活学活用的技能。
在你快要完成一个项目时，突然工程里的很多地方都出现了 bug，你修完一个又冒出新的一个，就像在玩打地鼠游戏一样……几轮下来，你会感到一团糟。
.markdown-body{word-break:break-word;line-height:1.75;font-weight:400;font-size:15px;overflow-x:hidden;color:#333}.markdown-body h1,.markdown-body h2,.markdown-body h3,.markdown-body h4,.markdown-body h5,.markdown-body h6{line-height:1.5;margin-top:35px;margin-bottom:10px;padding-bottom:5px}.markdown-body h1{font-size:30px;margin-bottom:5px}.markdown-body h2{padding-bottom:12px;font-size:24px;border-bottom:1px solid #ececec}.markdown-body h3{font-size:18px;padding-bottom:0}.markdown-body h4{font-size:16px}.markdown-body h5{font-size:15px}.markdown-body h6{margin-top:5px}.markdown-body p{line-height:inherit;margin-top:22px;margin-bottom:22px}.markdown-body img{max-width:100%}.markdown-body hr{border:none;border-top:1px solid #ddd;margin-top:32px;margin-bottom:32px}.markdown-body code{word-break:break-word;border-radius:2px;overflow-x:auto;background-color:#fff5f5;color:#ff502c;font-size:.87em;padding:.065em .4em}.markdown-body code,.markdown-body pre{font-family:Menlo,Monaco,Consolas,Courier New,monospace}.markdown-body pre{overflow:auto;position:relative;line-height:1.75}.markdown-body pre>code{font-size:12px;padding:15px 12px;margin:0;word-break:normal;display:block;overflow-x:auto;color:#333;background:#f8f8f8}.markdown-body a{text-decoration:none;color:#0269c8;border-bottom:1px solid #d1e9ff}.markdown-body a:active,.markdown-body a:hover{color:#275b8c}.markdown-body table{display:inline-block!important;font-size:12px;width:auto;max-width:100%;overflow:auto;border:1px solid #f6f6f6}.markdown-body thead{background:#f6f6f6;color:#000;text-align:left}.markdown-body tr:nth-child(2n){background-color:#fcfcfc}.markdown-body td,.markdown-body th{padding:12px 7px;line-height:24px}.markdown-body td{min-width:120px}.markdown-body blockquote{color:#666;padding:1px 23px;margin:22px 0;border-left:4px solid #cbcbcb;background-color:#f8f8f8}.markdown-body blockquote:after{display:block;content:""}.markdown-body blockquote>p{margin:10px 0}.markdown-body ol,.markdown-body ul{padding-left:28px}.markdown-body ol li,.markdown-body
经过了漫长的迭代，Vue 3.0终于在上2020-09-18发布了，带了翻天覆地的变化，使用了Typescript 进行了大规模的重构，带来了Composition API RFC版本，类似React Hook 一样的写Vue，可以自定义自己的hook ，让使用者更加的灵活，接下来总结一下vue 3.0 带来的部分新特性。
MVVM 由 Model,View,ViewModel 三部分构成，Model 层代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑；View 代表UI 组件，它负责将数据模型转化成UI 展现出来，ViewModel 是一个同步View 和 Model的对象。
通过淘宝镜像下载安装所有的依赖，几分钟后下载完成 如果没有安装淘宝镜像，请使用npm install
按照尤雨溪之前的官宣，Vue 3 已经在 「2022 年 2 月 7 日」成为新的默认版本
webpack简介，webpack是一个前端资源加载/打包工具，将各种js/css/html代码最后打包编译到一起。vuejs已经集成
build文件夹里面是对 webpack 开发和打包的相关设置，包括入口文件、输出文件、使用的模块等；
1.1 项目目录介绍 目录/文件 说明 详解 build 项目构建(webpack)相关代码 详解 config 配置目录，包括端口号等 详解 node_modules npm 加载的项目依赖模块 详
您将在本文当中了解到,往网页中添加数据,从传统的dom操作过渡到数据层操作,实现同一个目标,两种不同的方式.以及什么是组件,如何定义和使用组件,父子组件之间如何进行简单的通信传值...
阅读本文前，应该能够搭建环境，使用vue-cli进行项目的创建，可以参考文章：
如果你看过一千部以上的电影，你就会发现，这世间根本没有什么离奇的事。为什么从后端或者说网页三剑客过来的哥们，会有觉得vue上手快，容易学的错觉？很大程度上，在早期的vue中，还是以脚本文件的形式通过script标签引入vue,而稍微懂点编程的应该也都接触过像jQuery之类的类库，可以说你是天然会，创建一个实例也很好理解，你会发现印象比较深刻的例子就是我在一个文本框输入数据楼下的显示文本也跟着变化了，数据与视图巧妙结合。前后端通过JSON进行数据交互，Ajax技术进行通信，硬憋一下也还行。那么，为啥又难了呢？前端技术发展太快了，前阵子在v站上看到一个帖说后端看不懂前端(这个笔者在目前所在公司真的有很深很深很深很深深深深的感受，也让我明白了做职业规划的重要性)，其实，你找个前端过来也不一定能完全看得懂我个人认为，因为兴起的技术太特么多了，两只手怎么学的过来，若没有惊人的毅力。而且版本更新太快了，打开一个现代版的前端项目，配置文件就够你喝一壶，当然可能还有一些政治因素限制，僧多肉少的局面对源码也有一定的要求，导致难度曲线一下子就上去了，所以说比较难吧。生活不止眼前的苟且，还有你到不了的远方。加油吧，一点一点成长起来，同志们。
mocha是一款功能丰富的javascript单元测试框架，它既可以运行在nodejs环境中，也可以运行在浏览器环境中。 javascript是一门单线程语言，最显著的特点就是有很多异步执行。同步代码的测试比较简单，直接判断函数的返回值是否符合预期就行了，而异步的函数，就需要测试框架支持回调、promise或其他的方式来判断测试结果的正确性了。mocha可以良好的支持javascript异步的单元测试。 mocha会串行地执行我们编写的测试用例，可以在将未捕获异常指向对应用例的同时，保证输出灵活准确的测试结果报告。
由于mpvue框架是完全基于Vue框架的（重写了其runtime和compiler） 运行时框架 runtime 和代码编译器 compiler 实现
发出事件可以使子组件向父组件传播事件。考虑这样一个场景，我们有一个弹出组件，并且我们打算从父组件切换其可见性。
· 原理是通过在主应用引入每个子应用的入口文件(main.js)，进行解析，并指定渲染的容器
在本文中，我们将着眼于应该采用的实践，应该避免的事情，并仔细研究一些有助于编写 Vue.js 的有用工具。 我将主要关注 Vue 2，因为大多数人和组织仍在使用旧版本。 不过不用担心，因为这里提到的大多数内容仍然适用于 Vue 3，因为它只是一个增压和更快的版本。 不过，如果您已经了解 Vue 2 并且只想了解 Vue 3 中的新功能，那么您可以查看迁移指南以了解更多信息。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
