1. 目录构建的规范命名原则：简洁 比如： src 源代码 img 图片资源 js JavaScript脚本 dep 第三方依赖包不使用复数 比如： 不使用 imgs docs根目录（root）结构按职能划分 比如： 1. src 源代码（逻辑） 2. doc 文档 3. dep 第三方依赖包 4. test 测试根据业务逻辑进行文件夹的划分 src —common 公共资源 —img -----
转载
2024-08-23 17:41:56
33阅读
# 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
文章目录一、使用淘宝NPM镜像（一）为何使用淘宝镜像（二）安装淘宝NPM镜像（三）查看淘宝NPM镜像版本二、使用CNPM安装Vue最新稳定版（一）安装Vue最新稳定版（二）查看Vue命令行工具vue-cli版本（三）安装全局插件 - @vue/cli-init三、使用vue init创建Vue项目（一）初始化Vue项目（二）运行Vue项目（三）浏览器查看应用运行结果四、使用Vite创建Vue项目
前言官网虽有测试例子，但涉及较窄，遇到组件中存在异步传参、触发 action、获取 state 等问题时，编写单元测试便不知从哪下手。这篇文章结合实际项目，旨在解决上述问题，顺便记录写测试文件时遇到的一些问题，希望对各位朋友有所帮助。当然，最重要的问题是：为什么要写测试？于我，大概就是：如果写测试不是为了装逼，那将毫无意义 对写的程序更自信吧。环境vue-cli@2.9.2 配置 Jes
一、vue父子组件之间的传值：
简单来说，子组件通过props方法接受父组件传来的值，子组件通过$emit方法来向父组件发送数据。
二、vue生命周期函数：
beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeDestroy
destroyedajax操作是在monted生命周期中完成的。三、vue自定义指令：1.
简介：认识Vue3和项目搭建Vue3优点更小的打包体积和内存页面第一次的渲染速度和更新速度更快更好的支持 TypeScript
新增了 Composition API 和内置组件搭建Vue3项目vue-cli创建保持跟课程脚手架版本一致4.5.17，防止引用插件出现兼容问题npm install -g @vue/cli@4.5.17查看版本，不一致时重新安装vue -V //查看版本全局卸载重装n
Vue3单元测试近来工作接触了一个有意思的东西，那就是Vue3的单元测试。虽说写起来费时费力，但是它确实可以让我们设计的组件更加健壮、更加合理且风险可控，同时编写单元测试也让我们更近一步理解组件的设计原理，好了废话不多说，直接开始吧。快速开始初始化一个vue3+typescript项目，移除不需要的内容pnpm create vite接下来是安装vitest，这是和vitest配合使用的测试框架，
Vue.js——测试这里采用的是Vue官方工具（Vue-CLI）搭建出来的项目，在这个搭建工具中推荐的两种测试分别是端到端的测试 E2E单元测试 Unit Test端到端的测试（E2E）E2E或者端到端（End-To-End）或者UI测试是一种测试方法，它用来测试一个应用从头到尾的流程是否和设计时候所想的一样。简而言之，它从一个用户的角度出发，认为整个系统都是一个黑箱，只有UI会暴露给用户。单元测
转载
2024-07-18 09:57:28
68阅读
jest是Facebook的一套开源的JavaScript测试框架，它集成了快照测试、断言、mock以及覆盖率报告等功能，很全面而且基本不需要太多的配置便可使用Vue-Test-Utils是Vue的官方的单元测试框架，它提供了一系列非常方便的工具，使我们更加轻松的为Vue构建的应用来编写单元测试。 这里讲
1、Vue.js框架简介1.1、为什么要学习Vue.js什么是Vue.jsVue（读音 /vju:/，发音类似于 view）是一套用于构建用户界面的渐进式的JavaScript框架。Vue.js的优点体积小：压缩后只有33k；更高的运行效率：基于虚拟DOM，一种可以预先通过JavaScript进行各种计算，把最终的DOM操作计算出来并优化的技术，由于这种DOM操作属于预处理操作，并没有真实的操作D
转载
2024-09-08 13:28:35
28阅读
前言对于一些相对稳定的系统级别页面，自动化测试在提高测试的效率的方面起到非常重要的作用。前端的自动化测试主要包括：浏览器测试和单元测试。Vue官方脚手架自带自动化测试配置，并帮助你完成对组件，函数等的自动化测试。什么是持续集成？它和持续部署有什么区别？代码集成到主分支需要经过一系列的自动化测试，当测试都通过之后，方可执行自动化部署，否则不能完成集成。这说明了自动化测试的重要性，我们不能等测试工程师
作者：江敏熙 贝聊前端开发工程师 为什么要单元测试？项目的现状当前我在公司里负责的项目，可以分为两类：一类是相似度很高的项目，比如管理后台，这类项目的页面通过各种公共组件搭建而成。公共组件的复用性很高，所以质量尤为重要。如果开发人员在修改了公共组件之后留下了bug，那么将会直接降低了整个项目的质量。我希望让程序去测试这些公共组件，保证每一个公共组件是可用的。另一类是公司的核心项目，这些项目特点是维
工欲善其事，必先利其器，所以在开始之前选择一个合适好用的编辑器是很重要的，工具不再多，在于好用就行，除了编辑器，我们也要掌握其他的一些工具，才能够让我们在学习的道路上更加的顺畅。1. WebStorm不必多说，前端最强大的编辑器，特别是那无敌的智能提示，但是它的缺点在于如果项目多于大时，出现的卡顿让很多人苦恼。
WebStorm：官网下载地址。WebStorm 有哪些过人之处？激活WebStorm
一、1、vue介绍vue是一款敏捷开发的前端框架。2、vue基本使用 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue3.js">
转载
2023-12-27 11:59:24
82阅读
写一个vue组件我下面写的是以.vue结尾的单文件组件的写法，是基于webpack构建的项目。一个完整的vue组件会包括一下三个部分：template：模板js： 逻辑css ： 样式每个组件都有属于自己的模板，js和样式。如果将一个页面比喻成一间房子的话，组件就是房子里的客厅、卧室、厨房、厕所。如果把厨房单独拿出来的话，组件又可以是刀、油烟机...等等。就是说页面是由组件构成的，而组件也可以是组
目录一、创建测试项目 二、配置Nightwatch（以chrome为演示）一、创建测试项目首先通过@vue/cli创建一个基于nightwatch的测试项目。（我这里使用的是@vue/cli 3.x的版本）vue create your_project（你的项目名）因为我们要选择e2e功能所以不采用第一种的默认预设，通过方向键选择： Manually select features（手动
前端使用vue.js，那么怎么搭建vue.js呢先安装nodejs以及npm现在基本的nodejs都包含有npm，下载安装后，可以在cmd命令里输入node -v 和npm -v 分别查看安装的版本两个都显示了版本就是安装oknodejs安装成功之后，就安装vue直接cmd命令里运行npm install -g vue-cli (只需要第一次安装时执行)选定一个开发路径在文件里运行cmd 执行命令
有关于移动端的适配布局一直以来都是众说纷纭，对应的解决方案也是有很多种。在《使用Flexible实现手淘H5页面的终端适配》提出了Flexible的布局方案，随着viewport单位越来越受到众多浏览器的支持，因此在《再聊移动端页面的适配》一文中提出了vw来做移动端的适配问题。到目前为止不管是哪一种方案，都还存在一定的缺陷。言外之意，还没有哪一个方案是完美的。事实上真的不完美？其
搭建Vue3框架
原创
2023-08-13 00:56:39
1580阅读
Vue2项目前台开发：第一章一、项目初始化1.脚手架目录介绍2.项目的其他配置二、项目的路由分析及搭建1.项目的路由分析2.开发项目的步骤3.非路由组件的搭建4.路由组件的搭建（1）配置路由器（2）使用路由组件（3）路由组件与非路由组件的区别？（4）重定向（5）路由跳转的两种方式三、Footer组件的显示和隐藏——路由元信息四、路由传参1.复习路由跳转的两种方式2.路由传参，参数有几种写法？3.
