初识Vue.jsVue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的渐进式框架。Vue 只关注视图层， 采用自底向上增量开发的设计。本人认为，Vue是一个前端框架，有自己的模板语法，我们知道，传统的视图层是使用后端的模板标签来实现前端的展现逻辑，而Vue是有自己的模板语法，可以不依赖于后端来展现在前端页面，它有自己的模板语法、还有计算函数、事件监听处理、表单处理、路由、其他
第一步 1、 执行 npm install -g vue-cli 全局安装vue脚手架 2、执行vue init webpack '项目名称’初始化项目，产生报错解决方案: （1） 先执行上面提示的命令 npm install -g @vue/cli-init (2) 再重新全局安装脚手架 npm install -g vue-cli (3) 初始化项目： npm init webpack ‘项目
转载
2024-04-13 10:15:15
0阅读
如上面的知识图谱所示，一个常见的测试框架通常需要实现这些功能: ● before/after 钩子函数: 如beforeEach，afterEach， ● Mock方法： 函数Mock，时间mock等。 ● 断言: 判断一个描述是否正确，在Jest中常为 expect(xxx).toBe(xxx) 的形式 ● 测试覆盖率：提供多种形式的测试报告，如HTML，文本等形式这些基本的测试功能是每一个测
转载
2024-04-04 20:09:19
73阅读
步骤一：安装node.js在搭建vue的开发环境之前，需要先下载node.js，vue的运行是要依赖于node的npm的管理工具来实现，node可以在官网或者中文网里面下载，根据自己的电脑选择是32还是64 ，网址1：http://nodejs.cn/download/网址2：https://nodejs.org/dist/为了成员之间统一版本，我们使用的node-v8.9.1版本：（安装到自己的
使用 VuePress 搭建个人博客VuePress 是一个基于 Vue 的静态网站生成器。其中主要用到：Vue，VueRouter，Webpack。 类似的工具：hexo基于 Markdown 语法生成网页可以使用 Vue 开发的组件使用 VuePress 搭建个人博客：创建远程仓库本地博客项目搭建其它创建远程仓库
来到 Github，创建仓库没有用户的话先注册。新建一个仓库： 点左边的New或
转载
2024-07-18 06:27:21
79阅读
最近在搞Jest单元测试，如何在vue中安装和使用jest我就不说了，前一篇文章简单的说了一下在使用jest时遇到的一些问题，但是我觉得并没有真正的解决的很好。后面会在学习过程中更新前面的那篇文章，加入后续遇到的问题以及解决问题的方法，持续的做一个记录。 好了，废话不多说，咱们开始今天的内容吧。因为之前使用jest时候的项目是移植过来的项目，因为复杂的环境以及外部文件引入的等等等等的问题。采
单元测试的作用毋庸置疑能带来很多好处，但是如何去写好单元测试.单元测试好处提供描述组件行为的文档节省手动测试的时间减少研发新特性时产生的 bug改进设计促进重构TDD & BDDTDD（Test Driven Development）测试驱动开发TDD 的思想是根据需求先写测试用例，依照测试用例再去写功能代码。当增加或者修改某一项需求的时候，需要先修改测试用例，再依照测试用例去修改代码逻辑
转载
2024-06-04 16:55:58
114阅读
简介：认识Vue3和项目搭建Vue3优点更小的打包体积和内存页面第一次的渲染速度和更新速度更快更好的支持 TypeScript
新增了 Composition API 和内置组件搭建Vue3项目vue-cli创建保持跟课程脚手架版本一致4.5.17，防止引用插件出现兼容问题npm install -g @vue/cli@4.5.17查看版本，不一致时重新安装vue -V //查看版本全局卸载重装n
一、【必会】vue.js常见面试题css只在当前组件起作用 答： 在style标签中写入scoped即可 例如：<style scoped></style>
v-if 和 v-show 的区别 答：v-if 按照条件是否渲染，v-show 是display的block或none；$route 和 $router 的区别 $route是“路由信息对象”，包括path，para
关于Vue Test UtilsVue Test Utils是Vue.js 官方的单元测试实用工具库，在Vue和Jest之间提供了一个桥梁，暴露出一些接口，让我们更加方便的通过Jest为Vue应用编写单元测试，官网链接：https://v1.test-utils.vuejs.org/zh/。新建Vue项目并使用jest运行命令vue create ，选择自定义配置。按需选择配置，倒数第二个配置是单
/*************************************************************************************分割线*********************************************************************************************************
一、前言有时候我们在一条产品线上，会有多套前端代码，运行在不同平台或者有多个业务端。这些代码可复用性非常高，以至于可以从某套代码直接copy出来用于开发另一个业务端。于是某个小组件需要改动时却要跑起多个项目来修改。angular-cli很好地帮我们解决了这个问题——建立多项目的工作空间。在正式投入实战之前，先来试一试。来，，，做好笔记。 假设你已经装好了node和全局安装最新的angular-cl
单元测试 在新建项目的时候就将“单元测试”这个选项选上，CLI脚手架会自动帮助生成单元测试文件，依赖库都会帮助安装好。 a）jest和mocha。js是由facebook开发的，不需要自己去写js DOM以及断言，已经内置了断言库。 b）@vue/test-utils c)
转载
2024-02-17 10:47:29
187阅读
一、快照知识点补充为了更好的理解下面内容，这里先补充下，快照的知识。每当想要确保生成的 UI 不会有意外的改变时，快照测试时非常有用的工具第一次运行时，会生成快照文件第二次会比较不同，直接展示结果。更新快照 npm run test:unit – -u shallowMount：浅渲染，不会渲染子孙组件。仅测试组件本身。 mount：会测试子子孙孙组件，耗费性能更大。一般用 shallowMoun
转载
2024-03-25 21:22:07
81阅读
Computed 和 Methods 的区别可以将同一函数定义为一个 method 或者一个计算属性。对于最终的结果，两种方式是相同的不同点：computed: 计算属性是基于它们的依赖进行缓存的，只有在它的相关依赖发生改变时才会重新求值；method 调用总会执行该函数。如何定义动态路由？如何获取传过来的动态参数？（1）param方式配置路由格式：/router/:id
传递的方式：在path后
第一个vue-cli程序一.需要的环境1.1Node.js安装1.2安装Node.js淘宝镜像加速1.2.1查看刚刚安装所在目录1.2安装vue-cli1.2.1创建第一个vue-cli项目1.3webpack安装教程1.3.1安装指令1.3.2检查版本1.4webpack项目构建（webpack4X版本）1.4.1创建一个空项目1.4.2创建modules目录并在其目录下创建hello.js1
本文的目标2.1 在Vue应用的单元测试中，对不同UI组件的单元测试有何不同？颗粒度该细到什么样的程度？// Given
一个有基本的UT知识但没写过Vue测试的新人?
// When
当他?阅读和练习本文的Vue单元测试的部分
// Then
当然，他能够学会Vue组件在测试当中的几种渲染方式
他能够学会UI组件的分类，特别是交互行为的测试方式
复制代码组件化与 UI 测试在组件化出现之前，我们
对于父子（含跨级）传递数据的通信方式，Vue.js 并没有提供原生的 API 来支持，而是推荐使用大型数据状态管理工具 Vuex，但 Vuex 对于小型项目来说用起来真的很麻烦。在 Vue.js 1.x 中，提供了两个方法：$dispatch 和 $broadcast ，前者用于向上级派发事件，只要是它的父级（一级或多级以上），都可以在组件内通过 $on&n
文章目录一、使用淘宝NPM镜像（一）为何使用淘宝镜像（二）安装淘宝NPM镜像（三）查看淘宝NPM镜像版本二、使用CNPM安装Vue最新稳定版（一）安装Vue最新稳定版（二）查看Vue命令行工具vue-cli版本（三）安装全局插件 - @vue/cli-init三、使用vue init创建Vue项目（一）初始化Vue项目（二）运行Vue项目（三）浏览器查看应用运行结果四、使用Vite创建Vue项目
# vue3项目如何配置ESLint和prettier## 配置eslint安装`eslint````js
npm add eslint -D
```
安装完成后进行项目初始化
```js
npm init @eslint/config
```
然后根据提示选择对应的选项，作者个人选择如下：
```shell
? How would you like to use ESLint? ...
To c
