文章目录一、使用淘宝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
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阅读
前言官网虽有测试例子，但涉及较窄，遇到组件中存在异步传参、触发 action、获取 state 等问题时，编写单元测试便不知从哪下手。这篇文章结合实际项目，旨在解决上述问题，顺便记录写测试文件时遇到的一些问题，希望对各位朋友有所帮助。当然，最重要的问题是：为什么要写测试？于我，大概就是：如果写测试不是为了装逼，那将毫无意义 对写的程序更自信吧。环境vue-cli@2.9.2 配置 Jes
一、vue父子组件之间的传值：
简单来说，子组件通过props方法接受父组件传来的值，子组件通过$emit方法来向父组件发送数据。
二、vue生命周期函数：
beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeDestroy
destroyedajax操作是在monted生命周期中完成的。三、vue自定义指令：1.
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构建的应用来编写单元测试。 这里讲
简介：认识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配合使用的测试框架，
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阅读
作者：江敏熙 贝聊前端开发工程师 为什么要单元测试？项目的现状当前我在公司里负责的项目，可以分为两类：一类是相似度很高的项目，比如管理后台，这类项目的页面通过各种公共组件搭建而成。公共组件的复用性很高，所以质量尤为重要。如果开发人员在修改了公共组件之后留下了bug，那么将会直接降低了整个项目的质量。我希望让程序去测试这些公共组件，保证每一个公共组件是可用的。另一类是公司的核心项目，这些项目特点是维
前言对于一些相对稳定的系统级别页面，自动化测试在提高测试的效率的方面起到非常重要的作用。前端的自动化测试主要包括：浏览器测试和单元测试。Vue官方脚手架自带自动化测试配置，并帮助你完成对组件，函数等的自动化测试。什么是持续集成？它和持续部署有什么区别？代码集成到主分支需要经过一系列的自动化测试，当测试都通过之后，方可执行自动化部署，否则不能完成集成。这说明了自动化测试的重要性，我们不能等测试工程师
以下推荐国外比较稳定的两个 CDN，国内还没发现哪一家比较好，目前还是建议下载到本地。这一指令将会安装并执行 create-vue
原创
2024-10-14 09:50:52
120阅读
1、下载脚手架新建一个文件夹在文件夹内打开cmd：输入： cnpm install -g @vue/cli检验是否安装成功 ：vue-V 2、下载脚手架新建一个文件夹在文件夹内打开cmd：输入： vue create vue-next-leo(之后可以去选） 3、去升级打开新建的项目文件之后：输入： ...
转载
2021-09-17 18:36:00
246阅读
2评论
Node.js 和 NPM独立安装 Node.js 和 Npm（安装 Node.js即会安装 npm），查看版本node -v
npm -v淘宝镜像npm 如需淘宝镜像可安装 cnpm（非必须）npm install -g cnpm --registry=https://registry.npm.taobao.org引用或安装Vue3引用方式最为简单，在 html 文件中加入 vue 的引用即可，
转载
2023-06-28 08:56:42
354阅读
1 引言用 vite 创建的 vue3+ts 项目后，在 vscode 中打开，可以看到缺少很多 vue 开发必备依赖库与插件（如下图）。同时，有些配置与 vue-cli 建立的项目有所差异，此博文将对遇到的问题逐一解决，不断更新内容。2 安装 vue-router官网：https://router.vuejs.org/zh/installation.html
执行：npm install vue
转载
2023-11-25 07:16:15
226阅读
vue3 从零开始 起步与基础1 准备工作（安装+配置+创建）1.1 安装node.js1.1.1 下载node.js最新版本1.1.2 完成node.js配置1.3 使用vite进行创建1.3.1 为什么要创建【了解】1.3.2 为什么要用vite创建【了解】1.3.3 如何用vite进行创建【重点】1.4 打开vue文件2 学习内容2.1 vue文件内容2.1.1 文件内容详情2.1.2 文
转载
2023-08-28 13:02:07
210阅读
写一个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（手动
1.先全局安装vue-cli3.0 检测安装：
vue -V2.创建项目（这个就跟react创建脚手架项目比较像了） 1.这里如果你是第一次用3.0版本的话，是没有前两个的，而只有最后两个，这里是
2.让你选的，第一个是默认配置，一般选第二个，自己配置，这里选择最后一个 当你选择后会出现上面图上的东西，这里你可以自由选择用哪些配置，按上下键
选择哪一个，按空格键确定，所有的都选
转载
2023-12-14 06:45:34
96阅读
