vs code打开项目你会发现根目录下有一目录test/unit，里面就有一个已经生成的测试用例。
简介：vue cli 4 官方已经更新有一段时间了，现在是4.0.5 版本，看了官方文档大概有二十几点的更新，还是干货满满呀，值得升级一下，下面是升级步骤。
Vue-Test-Utils 是 Vue.js 官方的单元测试实用工具库，它提供了一系列的 API 来使得我们可以很便捷的去写 Vue 应用中的单元测试。
[译] 原文地址：https://medium.com/nerd-for-tech/from-vue-cli-to-vitejs-648d2f5e031d
这个库给的示例代码是 webpack.config.js 但是我们现在在用的是 Vue
我们在使用vue-cli构建项目的时候,每次初始化的时候都会出现一些配置选项,通常情况下,我们是根据每次的需求来选择不同的配置项
有些针对 @vue/cli 的全局配置，例如你惯用的包管理器和你本地保存的 preset，都保存在 home 目录下一个名叫 .vuerc 的 JSON 文件。你可以用编辑器直接编辑这个文件来更改已保存的选项。
一直对单测很感兴趣，但对单测覆盖率、测试报告等关键词懵懵懂懂，最近几个月一直在摸索如何在Vue业务系统中落地单元测试，看到慢慢增长的覆盖率，慢慢清晰的模块，对单元测试的理解也比以前更加深入，也有一些心得和收获。
由于 Jest 运行在 Node 环境 中，所以并不支持 import 这个来自 ESM 的关键字，所以就需要 @babel/preset-env ，文档 jest/using-babel
解决办法：配置环境变量PATH，增加：C:\Program Files\nodejs
随着对前端功能和性能的不断提高，前端早就不是一段内嵌于页面的一段JS代码了。已经进化为一个系统复杂的工程了。 下面我就结合element3组件库的搭建经验。带大家搭建一个mini版组件库。
Vue3 跟 Vite 正式版发布有很长一段时间了，生态圈也渐渐丰富起来，作者已在多个项目中使用，总结一下：就是快！也不用担心稳定性问题，开发体验真不是一般好！还没尝试的同学可以从本文开始学习，从 0 开始手把手带你搭建一套基于 Vite + Vue3 + TypeScript 规范的前端工程化项目环境。
在互联网时代软件从开发到上线，后续迭代更新，已经形成了一套近乎标准的流程，其中最重要的流程就是持续集成(Continuous integration，简称CI)。"持续"的核心思想在于：在事先难以完全了解完整正确的需求时，干脆把大项目分割成小块完成，并加快交付的速度和频率，使其尽早在下个环节得到验证，若发现问题能够尽早返工。
Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，提供了终端命令行工具、零配置脚手架、插件体系、图形化管理界面等。本文暂且只分析项目初始化部分，也就是终端命令行工具的实现。
windows 1. Node.js （>=8.9, 推荐8.11.0+） Node官网下载 .msi 文件，按步骤下载安装即可。 安装完之后在cmd中输入 node -v，若显示版本号，则说明安装成功。 2. Git（命令行终端） Git官网下载安装即可。
本文出自于掘金的子弈[1]，原文链接 从零开始配置 TypeScript 项目[2]。
-多年互联网运维工作经验，曾负责过大规模集群架构自动化运维管理工作。 -擅长Web集群架构与自动化运维，曾负责国内某大型金融公司运维工作。 -devops项目经理兼DBA。 -开发过一套自动化运维平台（功能如下）： 1)整合了各个公有云API，自主创建云主机。 2)ELK自动化收集日志功能。 3)Saltstack自动化运维统一配置管理工具。 4)Git、Jenkins自动化代码上线及自动化测试平台。 5)堡垒机，连接Linux、Windows平台及日志审计。 6)SQL执行及审批流程。 7)慢查询日志分析web界面。
Jest 是 Facebook 开源的一款 JS 单元测试框架，它也是 React 目前使用的单元测试框架,目前vue官方也把它当作为单元测试框架官方推荐 。 目前除了 Facebook 外，Twitter、Airbnb 也在使用 Jest。Jest 除了基本的断言和 Mock 功能外，还有快照测试、实时监控模式、覆盖度报告等实用功能。 同时 Jest 几乎不需要做任何配置便可使用。
结果发现这一行 Ts 报错了，原因是 vue 的版本不一致，真实的场景下不会出现这个问题，因为真实情况下组件库用的是上级的依赖。
原文：https://lmiller1990.github.io/vue-testing-handbook/testing-vuex.html
将打包后的dist文件夹上传到服务器上部署（nginx、tomcat都可以，我的环境是nginx），访问：
CLI：@vue/cli 全局安装的 npm 包，提供了终端里的vue命令（如：vue create 、vue serve 、vue ui 等命令）
最近公司想要从mocha+karma的前端单元测试方式转换到Jest，然后任务就分配给我了，好吧，在这之前连单元测试是什么都不知道。硬生生的开始写单元测试了，写这篇文章的初衷是因为在配置Jest的过程中有好多问题，百度几乎搜索不到，无奈本人英文太差，却又不得不去看英文文档。然后，想要写篇文章，记录下其中遇到的一些问题以及解决问题的方法，当然，现在还有不少问题没有解决，等到解决了之后再来更新...orz。
本文系统的梳理了vue-cli3搭建项目的常见用法，目的在于让你快速掌握独立搭建vue项目的能力。你将会了解如下知识点：
Github来源：一个合格的中级前端工程师需要掌握的技能 | 求星星 ✨ | 给个❤️关注，❤️点赞，❤️鼓励一下作者
接着会问我们是否使用history router，其实直白来说就是是否路径带 # 号，建议选择 n，否则服务器还要进行配置
我们可以在 Vue.js 的官网上直接下载最新版本, 并用 <script> 标签引入。
Babel 是一个工具链，主要用于将采用 ECMAScript 2015+ 语法编写的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。（我摊牌了，直接从 `Babel` 中文官网[1]复制），我们一般用 Babel 做下面几件事：
相信看到这篇文章的人，都是对Electron感兴趣的， 网上关于Electron的教程其实已经不少了，但是大多都是一些功能点的实现，对于从零开始搭建一个适合自己的项目，估计还是有不少人有点懵逼的。刚好自己也学习Electron一段时间了，想着整理一下自己学习期间的一些笔记和踩坑的地方，从零开始编写一个小项目。一个由浅入深（或者说从入门到放弃）的套路，一步步带你敲代码实现一个小项目，希望能给大家带来一点点启发。
最近公司想要从mocha+karma的前端单元测试方式转换到Jest，然后任务就分配给我了，好吧，在这之前连单元测试是什么都不知道。硬生生的开始写单元测试了，写这篇文章的初衷是因为在配置Jest的过程中有好多问题，百度几乎搜索不到，无奈本人英文太差，却又不得不去看英文文档。然后，想要写篇文章，记录下其中遇到的一些问题以及解决问题的方法，当然，现在还有不少问题没有解决，等到解决了之后再来更新…orz。
小白一枚，今年（2019）准备学习一下前端的技术，因为发现自己对后端(python)相对比较熟悉但是还是写不出一个优雅的系统，可见前端的重要性，于是静下心学习。在不断的激励自己调整自己的情绪，满足一下自己对技术的兴趣。
上图标红就是相关的工程化配置，有 Linter、Tests，Github Actions 等，覆盖开发、测试、发布的整个流程。
ECMAScript 基于多种原始技术，最著名的是 JavaScript (Netscape) 和 JScript (Microsoft)。截止2022年，正式标准一共发布12次，es2020草案撰写中。
对于现在的前端工程，一个标准完整的项目，通常情况单元测试是非常必要的。但很多时候我们只是完成了项目而忽略了项目测试。我认为其中一个很大的原因是很多人对单元测试认知不够，因此我写了这边文章，一方面期望通过这篇文章让你对单元测试有一个初步认识。另一个方面希望通过代码示例，让你掌握写单元测试实践能力。
表示已经研究了3天了，应该说是3个晚上了，在运行官方的react-native的最新版本的时候老是报错， 像":CFBundleIdentifier", Does Not Exist reactproptypes.string 还有其它的很多错误； 最后找到了一个解决的方案，这些问题无非是缺少包，或者在安装到模拟器的时候端口被站用。 以下是我的解决方案，不管你们再遇到什么问题，把下面的这些内容copy到你的package.json的文件中，覆盖它们，然后重新运行 rm -rf node_modules &&
对于生产环境，我们推荐链接到一个明确的版本号和构建文件，以避免新版本造成的不可预期的破坏：
npx-cli.js –ignore-existing create-react-app . –scripts-version –typescript
Vue CLI3 出来已经很长时间了，一直想研究它的插件系统却没有时间（其实是懒），刚好最近需要统一一下项目组的规范（借口），于是就有了契机。
原因：当配置index.html时，指定了javascript的具体路径，为了使热模块重新加载工作，需要允许注入此路径，这样就可以实时更新html了。
在做表单的时候，会遇到很多的表单项的验证工作，几乎很多验证都是重复的，有一个比较好的lodash库来做了这些工作，但是里面有些方法和实际的业务工作有些不符。比如，lodash.isEmpty(2) // true是会认为是空的。这显然与实际的业务是不符的。另外还有一些数字校验等其他的常用的校验方法，想结合lodash做一个自己的库，这样比较有利于业务的开发。
按照软件工程自底而上的概念，前端测试一般分为单元测试（Unit Testing ）、集成测试（Integration Testing）和端到端测试（E2E Testing）。
create-react-app 是由 React 官方提供并推荐使用构建新的 React 单页面应用程序的最佳方式，不过目前版本(1.5.x)其构建的项目中默认是不支持动态样式语言 Less 的。如果我们的项目必须要使用 Less 呢，这就需要我们手动集成一下。本篇主要针对集成的过程做一个简要记录。
Vue-Cli 推荐两种测试分别是：端到端的测试（E2E） 和 单元测试(Unit Test) 一、端到端（E2E）： 端(消费端)到端(产品端)的测试（E2E (End-to-End)）, 它用来测试一个应用从头到尾的流程是否和设计时候所想的一样。简而言之，它从一个用户的角度出发，认为整个系统都是黑箱，只有UI会暴露给用户 二、单元测试（Unit Test）： 测试驱动开发（TDD: Test-Driven Development）, 单元测试是用来对一个模块、一个函数或者一个类来进行正确性检验的测试工作。 Vue中的单元测试中有( Jest +Karma+ Mocha(Chai) ) Karma: Karma是一 个基于Node.js的JavaScript测试执行过程管理工具( Test Runner)。该工具在Vue中的主要作用是将项目运行在各种主流Web浏览器进行测试。 换句话说，它是一个测试工具,能让你的代码在浏览器环境下测试。需要它的原因在于,你的代码可能是设计在浏览器端执行的,在node环境下测试可能有些bug暴露不出来;另外,浏览器有兼容问题, karma提供了手段让你的代码自动在多个浏览器( chrome，firefox ，ie等)环境下运行。 如果你的代码只会运行在node端，那么你不需要用karma。 Mocha mocha(摩卡)是一个测试框架，在vue-cli中配合。mocha本身不带断言卡，所以必须先引入断言库，Chai断言库实现单元测试。 Mocha的常用命令和用法不算太多,而Chai断言库可以看Chai.js断言库API中文文档,很简单,多查多用就能很快掌 握。 断言库 所谓“断言” ,就是判断源码的实际执行结果与预期结果是否-致,如果不一致就抛出一个错误。下面这句断言的意思是,调用add(1, 1) ,结果应该等于2. 复制代码
Vite已经出来很久了，新版本也比较稳定，有没有打算入手一下，推荐下面这篇文章。
Vite (法语意为 "快速的"，发音 /vit/) 是一种面向现代浏览器的一个更轻、更快的前端构建工具，能够显著提升前端的开发体验。除了Vite外，前端著名的构建工具还有Webpack和Gulp。目前，Vite已经发布了Vite2，Vite全新的插件架构、丝滑的开发体验，可以和Vue3的完美结合。
作为一个以 文档丰富 而广为人知的前端开发框架， Vue.js 的官方文档中分别在《教程-工具-单元测试》、《Cookbook-Vue组件的单元测试》里对 Vue 组件的单元测试方法做出了介绍，并提供了官方的单元测试实用工具库 Vue Test Utils；甚至在状态管理工具 Vuex 的文档里也不忘留出《测试》一章。
我一直在做的小程序就是 山科小站 也已经做了两年了，目前是用uniapp构建的，在这期间也重构好几次了，这次在鹅厂实习感觉受益良多，这又得来一次很大的重构，虽然小程序功能都是比较简单的功能，但是这好不容易实习学到的东西得学以致用，那就继续在小程序上动手吧哈哈。这次实习收获最大倒不是怎么迁移到TS，而是一些组件设计的概念以及目录结构设计上的东西，不过这都是在之后重写组件的时候要做的东西了。回到正题，小程序是用uniapp写的，毕竟还是比较熟悉Vue语法的，这次迁移首先是要将小程序从HBuilderX迁移到cli版本，虽然用HBuilderX确实是有一定的优点，但是拓展性比较差，这些东西还是得自己折腾折腾，迁移到cli版本完成后，接下来就是要慢慢从js过渡到ts了，虽然是Vue2对ts支持相对比较差，但是至少对于抽离出来的逻辑是可以写成ts的，可以在编译期就避免很多错误，另外自己使用cli创建可以搞一些其他功能，毕竟只要不操作DOM的话一般还是在用常用的js方法，例如可以尝试接入Jest单元测试等。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
对象存储
云直播
