目前的项目已经维护了挺久,由于客户要求,我们要为项目加上单元测试,挑选一番后选择了Jest(配置简便,开箱即用),下面记录了此次为项目添加Jest作为单元测试的经历. 安装Jest 1. 在项目目录下,执行命令vue add @vue/cli-plugin-unit-jest,这个命令会帮我们把相关的配置都配好,相关的依赖都装好,还会帮我们生成一个jest.config.js文件,网上说还会生成tests文件夹,我试的没有,另外还会帮你在eslintr.js文件下配置好jest需要的配置. 一开

前言 文章内容覆盖范围,芝麻绿豆的破问题都有,不止于vue; 给出的是方案,但不是手把手一字一句的给你说十万个为什么! 有三类人不适合此篇文章: “喜欢站在道德制高点的圣母婊” – 适合去教堂 “无理取闹的键盘侠” – 国际新闻版块欢迎你去 “有一定基础但又喜欢逼逼的人” 得得得,老子知道你厉害了,你好牛逼,这些问题那么简单,都是小白看的 这种傻瓜文,简直浪费老子的时间! 对于以上三类人,走吧,这里不是你来装逼的地方. 你们也不值得看老子花那么多时间去汇总的水文. 学习一些新东西.若是有人给汇总

问题汇总 Q:安装超时(install timeout) 方案有这么些: cnpm : 国内对npm的镜像版本 /* cnpm website: https://npm.taobao.org/ */ npm install -g cnpm --registry=https://registry.npm.taobao.org // cnpm 的大多命令跟 npm 的是一致的,比如安装,卸载这些 yarn 和 npm 改源大法 使用 nrm 模块 : www.npmjs.com/package/nr

贫富差距的产生 – 目光博客 http://eyehere.net/2017/1947/ https://github.com/vuejs/vue Vue 2.0 Hello World - JSFiddle https://jsfiddle.net/chxw4kLs/ 基于vue-cli快速构建 - 简书 https://www.jianshu.com/p/2769efeaa10a Vue是什么,是一套构建用户界面的渐进式框架(官网解释),什么叫渐进式框架呢,简单回答就是主张最少,这些概念只能

欢迎加入前端交流群交流知识&&获取视频资料:749539640 如何在angularjs(1)中使用vue参考: https://medium.com/@graphicbeacon/how-to-use-vue-2-0-components-in-an-angular-application-4d85bacc42dc 如何在angular2-7中使用vue 将Vue组件包装为本Web组件. 由于Angular支持使用自定义Web组件,因此能够使用Vue组件(包装为Web组件). 对于Ang

1.用CLI3创建项目 查看当前CLI的版本,如果没有安装CLI3的  使用npm install --global vue-cli来安装CLI 安装好CLI 可以创建项目了 使用vue create project (可以选择默认的配置  也可以手动配置  ) 手动配置相关 翻译: 选择css预处理,这里我选择stylus ? Please pick a preset: Manually select features ? Check the features needed for your

安装使用VUE 如果是简单实用vue的话,可以直接引用js文件. https://vuejs.org/js/vue.js 但是在构建大型项目的时候推荐使用NPM安装,NPM能够很好的和诸如webpack或Browserify模块打包器配合使用,同时Vue也提供配套工具来开发单文件组件. 1. 安装nodejs 由于npm(nodejs package manager)是nodejs的包管理器,所以要首先安装nodejs,从官网下载相应版本安装即可https://nodejs.org/en/dow

首先npm安装vue-router插件,就不说了其次: 先看下我本地的目录结构吧 第一步:在src目录下新建一个专门存放router的index.js文件里面的内容为: import Vue from 'vue' //注:这句必须要有,虽然在main.js里面已经引入过Vue,但是这里不要这句的话,就直接报错了Vue is not defined import VueRouter from 'vue-router' import conOne from '@/views/conOne' Vue.

1. Node.js 10 将带来什么? Node.js 10 的第一个版本将于本周二(4 月 24 日)发布,并将在 10 月份推出 LTS 版本,将带来哪些更新? N-API,持续 HTTP/2 支持,ECMAScript Modules(ESM),Async Hooks 等等. 详情:https://nodesource.com/blog/what-you-can-expect-from-node-js-10 2. webpack 4.6.0 发布 webpack 4.6.0 发布了对 P

接着前面的内容:https://www.cnblogs.com/yanggb/p/12682364.html. 单元测试 vue cli拥有开箱即用的通过jest或mocha进行单元测试的内置选项.官方的vue test utils还提供了更多详细的指引和自定义设置. 简单的断言 你不必为了可测性在组件中做任何特殊的操作,导出原始设置就可以了: <template> <span>{{ message }}</span> </template> <scr

为什么要使用 vue-cli Vue CLI 致力于将 Vue 生态中的工具基础标准化.它确保了各种构建工具能够基于智能的默认配置即可平稳衔接,这样你可以专注在撰写应用上,而不必花好几天去纠结配置的问题.与此同时,它也为每个工具提供了调整配置的灵活性,无需 eject. (以下命令都是在dos窗口执行,徽标键+R,输入cmd进入.) 1.安装node.js 官网下载:https://nodejs.org/zh-cn/download/ 下一步下一步,就OK了. 测试是否安装成功,输入node -

这些年,Webpack 基本成了前端项目打包构建的标配.关于它的原理和用法的文章在网上汗牛充栋,大家或多或少都看过一些.我也一样,大概了解过它的构建过程以及常用 loader 和 plugin 的配置.性能优化方法等等,仅限于"面试够用"的程度.在实际工作中,往往是配置好后就放一边了,没有遇到问题是不会再碰它的. 我一直有个习惯(或者叫毛病),就是不太愿意花时间去研究暂时用不上的技术.我称其为"屠龙之技":学会了屠龙的技术,可是找不到龙啊.这样的技术没有实际应用来强

       jest是Facebook的一套开源的JavaScript测试框架,它集成了快照测试.断言.mock以及覆盖率报告等功能,很全面而且基本不需要太多的配置便可使用Vue-Test-Utils是Vue的官方的单元测试框架,它提供了一系列非常方便的工具,使我们更加轻松的为Vue构建的应用来编写单元测试.       这里讲的主要是Vue+Jest+Vue-Test-Utils的项目,假设现在你已经使用vue-cli3搭建了一个vue项目:   1.安装jest npm install -

在vue单页面应用中,我们大概都会使用CommonsChunkPlugin这个插件. 传送门 CommonsChunkPlugin 但是在项目经过本地测试没有任何问题,打包上线后却会报错 webpackJsonp is not defined.这是因为公共文件必须在自己引用的js文件之前引用. 可以手动改文件引用,但是推荐以下解决办法: 找到build→webpack.prod.conf.js→找到HtmlWebpackPlugin插件,添加如下配置即可 chunks: ['manifest',

报错图例如下:template or render function not defined vue 突然报错了,怎么解决什么错误呢,就是加载不出来,网上看了一通,是vue版本不对,是vue-compile 包安装的不对.可自我感觉不是这个问题,为什么其他相同的组件就能加载出来.. 突然发现一个问题 cpu.js和cpu.vue,名字相同了 import cpu from './cpu' ; 这样是不是引入的时候,不知道哪个是组件了,好,就是这个问题. 然后改了cpu.js的名字,改为cpu_d

今天学习Vue中遇到了一个报错信息:$index is not defined,是我写了个for循环在HTML中,然后是因为版本的问题 下面是解决方法: 原来的是 v-for="person  in  items" v-on:click="deletePerson($index)"//这个仅仅适用于1.0版本,不要采坑了同学们 这个在Vue1.0版本中式适用的可以直接使用$index,但是在2.0是不适合的 在Vue 2.0版本中获取索引我们需要通过 v-for =

我的项目是用vue提供的vue-cil脚手架生成的项目,但是当我在项目中使用async/await,编译代码的的时候报了regeneratorRuntime is not defined的错,我查过资料,是因为你的项目中没有使用transform-runtime将es6抓换成es5 注意:不建议使用babel-polyfill,因为这个太大了,现在6.0版本的babel改成了插件的形式,现在推荐的是transform-runtime 第一步:下载babel-polyfill, npm i bab

Vue单元测试Karma+Mocha Karma是一个基于Node.js的JavaScript测试执行过程管理工具(Test Runner).该工具在Vue中的主要作用是将项目运行在各种主流Web浏览器进行测试. 换句话说,它是一个测试工具,能让你的代码在浏览器环境下测试.需要它的原因在于,你的代码可能是设计在浏览器端执行的,在node环境下测试可能有些bug暴露不出来:另外,浏览器有兼容问题,karma提供了手段让你的代码自动在多个浏览器(chrome,firefox,ie等)环境下运行.如果

vue项目npm run dev 后项目报错 : 提示 “exports is not defined”. 导致这个问题是因为balbel的配置文件.babelrc的问题: { "presets": [ ["env", { "modules": false }], "stage-2" ], "plugins": ["transform-runtime"], "comments&

Karma Karma是一个基于Node.js的JavaScript测试执行过程管理工具(Test Runner).该工具在Vue中的主要作用是将项目运行在各种主流Web浏览器进行测试.换句话说,它是一个测试工具,能让你的代码在浏览器环境下测试.需要它的原因在于,你的代码可能是设计在浏览器端执行的,在node环境下测试可能有些bug暴露不出来:另外,浏览器有兼容问题,karma提供了手段让你的代码自动在多个浏览器(chrome,firefox,ie等)环境下运行.如果你的代码只会运行在node端

在 GearCase 开源项目 中,我使用了 Vue Cli 的默认测试框架.因此和样式相关的东西,都无法进行测试.因为它并不类似于无头浏览器,而是存在于虚拟内存之中. 现状 在如下 button.spec.js 单元测试用例当中,关于 icon 默认的 order 的测试用例无法进行测试,因为它涉及到了样式.前面已经提到由于它处于虚拟内存之中.因此只要进行单元测试,就会出现以下报错. // 样式相关的测试用例 it('icon 默认的 order 是 1', () => { const wra