Vue项目覆盖率展示
2024-04-14 22:50:27
建立一个集成了单元测试的Vue项目
- 创建一个vue-cli项目
vue create mytestdemo# 选择手动配置Please pick a preset: zcloud (router, vuex, less, babel, eslint, unit-jest) default (babel, eslint) * Manually select features # 选择需要的功能
? Please pick a preset: Manually select features
? Check the features needed for your project: ◉ Babel◯ TypeScript◯ Progressive Web App (PWA) Support◉ Router◉ Vuex◉ CSS Pre-processors◉ Linter / Formatter◉ Unit Testing❯◉ E2E Testing# 使用 history 模式
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter, Unit, E2E
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) Y# scss
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter, Unit, E2E
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with dart-sass)
❯ Sass/SCSS (with node-sass) Less Stylus # esLint
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter, Unit, E2E
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with node-sass)
? Pick a linter / formatter config: ESLint with error prevention only ESLint + Airbnb config
❯ ESLint + Standard config ESLint + Prettier # 保存时进行检测
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter, Unit, E2E
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with node-sass)
? Pick a linter / formatter config: Standard
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
❯◉ Lint on save◯ Lint and fix on commit# 单元测试 mocha + chai
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter, Unit, E2E
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with node-sass)
? Pick a linter / formatter config: Standard
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)Lint on save
? Pick a unit testing solution: (Use arrow keys)
❯ Mocha + Chai Jest # 端到端测试
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter, Unit, E2E
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with node-sass)
? Pick a linter / formatter config: Standard
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)Lint on save
? Pick a unit testing solution: Mocha
? Pick a E2E testing solution: (Use arrow keys)
❯ Cypress (Chrome only) Nightwatch (WebDriver-based) # 单独的配置文件
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter, Unit, E2E
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with node-sass)
? Pick a linter / formatter config: Standard
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)Lint on save
? Pick a unit testing solution: Mocha
? Pick a E2E testing solution: Cypress
? Where do you prefer placing config for Babel, ESLint, etc.?
❯ In dedicated config files In package.json # 不保存配置
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter, Unit, E2E
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with node-sass)
? Pick a linter / formatter config: Standard
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)Lint on save
? Pick a unit testing solution: Mocha
? Pick a E2E testing solution: Cypress
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? (y/N) n# 开始创建项目
Vue CLI v4.1.2
✨ Creating project in /Users/heyi/File/Front-End/demo/vue-unit.
Vue项目覆盖率展示相关推荐
- 前端vue项目(使用pdf.js) pdf展示及pdf工具栏放大缩小功能实现
前端vue项目(使用pdf.js) pdf展示及pdf工具栏放大缩小功能实现 1.vue项目pdf展示 2.pdf工具栏放大缩小功能 文章目录 前端vue项目(使用pdf.js) pdf展示及pdf工 ...
- Vue项目中利用pdf.js实现pdf内容滑选文字展示与搜索功能
Vue项目中利用pdf.js实现pdf内容滑选文字展示与搜索功能 需求:在pdf中鼠标滑动选中一段文字,将选中文字展示到input框中(pdf在iframe中) 完成效果: 关于pdf的引用:我是直接 ...
- VUE 项目实现大屏展示的响应式
vue项目实现大屏展示 自适应问题 此处的项目为vue2版本,因为pc端的项目没有采用响应式自适应手机端的设计,所以使用lodash插件实现屏幕移动端自适应. 首先下载lodash插件. npm i ...
- vue项目实现大屏展示 自适应问题
vue项目实现大屏展示 自适应问题 此处的项目为vue2版本,因为该项目立项阶段未要求兼容大屏设备和移动端设备,原设计稿尺寸1920X1080像素,如何实现响应式布局. 一.安装 postcss-px ...
- vue项目中 一行文本 文字 根据关键字 改变颜色 改变展示颜色2
vue项目中 一行文本 文字 根据关键字 改变颜色 改变展示颜色2 <script src="https://unpkg.com/vue@3/dist/vue.global.js&qu ...
- vue项目实现文件下载中心:下载、取消下载、列表展示
vue项目实现文件下载中心:下载.取消下载.列表展示 实现下载进度条 封装JS方法 使用store存储文件下载进度列表 创建一个列表组件 在页面中使用 效果展示 实现下载进度条 平时业务中下载文件方式 ...
- vue项目Echarts更新数据是数据表展示错版
vue项目Echarts更新数据是数据表展示错版 当我们第一次渲染数据的时候,echarts渲染是正常的,但是当我们的数据更新的时候,展示的图表会出现错版现象,其中最常见的是曲线图. 比如下面,刚开始 ...
- 在vue项目前端如何实现展示动态小程序二维码
在vue项目前端如何实现展示动态小程序二维码 (就是根据所对应的商家数据展示一个动态的二维码) 首先,主要的工作还是后端和小程序前端的工作,我们vue项目的前端主要是根据他们给出的url一级所对应的参 ...
- 【vue】 vue项目开发卡片展示页面----菜品管理
vue项目开发卡片展示页面----菜品管理 对话框表单获取父组件数据 子组件dishform 对话框表单样式 methods 中的dataInit方法 获取父组件传来的数据 <script> ...
最新文章
- linux的tar中ztvf,linux中的tar命令(2)
- Swift学习:自动引用计数
- 加权平均融合消除图像拼接的拼缝（Python 代码）
- JavaScript 如何使用闭包
- 毕业设计(论文)-c++小型ftp服务器系统【毕业论文】.doc,毕业设计(论文)-C++小型FTP服务器系统.doc...
- jwt如何防止token被窃取_在吗？认识一下JWT(JSON Web Token)？
- web前端开发最佳实践_Web开发人员和设计师的最佳黑色星期五优惠
- anguar4 共享服务在多个组件中数据通信
- win8.1能安装matlab,解决win8.1安装matlab出现无法访问您试图使用的功能...vcredist.msc...等等...
- Processing 案例 | 三角函数之美
- linux洪水攻击软件,Linux遭受SYN洪水攻击设置
- matlab单点弦截法求解,弦截法求根c语言
- 2048网页版html项目报告,jQuery编写网页版2048小游戏
- 网下“范跑跑”：范美忠的另一面
- 拷贝服务器文件有监控的,服务器文件拷贝监控
- 求救，华为S5720-36c-ei交换机vlan
- SpringBoot应用监控SpringBoot+Prometheus+Grafana
- 4S维修管理系统(RPMS)总结
- 人员管理KPI和OKR
- 解密史上最赚钱的理财规划
热门文章