一个项目学习Vue3---创建一个 Vue 应用

步骤1:安装符合要求的node版本

目前官网要求使用的node.js版本为18.3及其以上

所以我们要安装node.js 18.3及其以上版本

 NVM安装教程:一个项目学习Vue3---NVM和NPM安装-CSDN博客

若不想安装NVM,可以直接下载适合自己的node版本Node.js — 在任何地方运行 JavaScript (nodejs.org)

安装好后从步骤2开始

nvm ls 

若存在18.3.0则不需要重新安装,若不存在,可以参考上一篇文章,先安装nvm版本管理工具,使用一下命令进行安装18.3.0

nvm install 18.3.0
nvm use 18.3.0

再次运行nvm ls 则可以看到版本已经指向了18.3.0

步骤2:设置Node的镜像库

若切换了版本nrm和镜像库都需要重新设置一次

npm config set registry https://registry.npmmirror.com
npm install -g nrm

执行

nrm ls

可以看到镜像已经指向淘宝的镜像地址

步骤3:创建第一个Vue应用

创建一个文件夹,使用vscode工具或者其他文本编辑工具打开该文件夹

在vscode中

创建一个命令窗口

在底部执行命令,则会创建一个最新的vue项目,至此vue项目创建完成

npm create vue@latest

创建完成后执行

npm run dev

下方会输出端口和地址,点击即可打开项目

其他:创建过程中的日志分析

✔ Project name: … <your-project-name>

PS:让你输入项目名称

✔ Add TypeScript? … No / Yes

PS:是否使用TypeScript

TypeScript:是一种增强型JS 官方地址:TypeScript中文网 · TypeScript——JavaScript的超集 (tslang.cn)

✔ Add JSX Support? … No / Yes

PS:是否使用JSX

JSX:允许JS中写HTML代码 官方地址:JSX 简介 – React (reactjs.org)

✔ Add Vue Router for Single Page Application development? … No / Yes

PS:是否为单页面添加路由

Vue Router:页面跳转时路由器,官方地址:Vue Router | Vue.js 的官方路由 (vuejs.org)

✔ Add Pinia for state management? … No / Yes

PS:是否使用Pinia管理状态,官网地址:Pinia | The intuitive store for Vue.js (vuejs.org)

Pinia : Vue 的专属状态管理库,它允许你跨组件或页面共享状态。

✔ Add Vitest for Unit testing? … No / Yes

Vitest : 一种测试工具,官网地址:Vitest | 下一代测试框架

PS:是否使用极速单元测试框架Vitest 进行单元测试

✔ Add an End-to-End Testing Solution? … No / Cypress / Nightwatch / Playwright

PS:是否使用端到端测试工具

Cypress

Cypress 是一个现代化的端到端测试工具,专注于提供可靠性、快速性和易用性。以下是它的一些主要特点:

  • 自动化和调试: Cypress 允许开发者在测试运行时进行实时调试,能够以可预测的方式模拟用户行为。

  • 断言和测试交互性: Cypress 提供了强大的断言库,支持对页面元素的直接访问和交互,使得编写和维护测试用例更为直观和高效。

  • 可视化测试运行: Cypress 提供可视化的测试运行界面,可以实时查看测试的执行情况和结果。

Cypress 在社区中受到广泛欢迎,特别适合于需要高度交互性和快速反馈的应用程序。

Nightwatch.js

Nightwatch.js 是一个基于Node.js的端到端测试框架,它注重于简化测试的编写和管理。以下是它的一些主要特点:

  • 基于WebDriver协议: Nightwatch.js 使用WebDriver协议与浏览器进行交互,支持多种主流浏览器的测试。

  • 易用的API: Nightwatch.js 提供了简洁明了的API,使得测试用例的编写变得更加直观和简单。

  • 并行测试和测试报告: Nightwatch.js 支持并行测试运行,并且能够生成详细的测试报告,帮助团队分析和追踪测试结果。

Nightwatch.js 适合于那些需要与多种浏览器进行集成测试或需要更灵活配置的项目。

Playwright

Playwright 是一个由Microsoft开发的跨浏览器自动化测试工具,它相对较新但已经获得了广泛的关注。以下是它的一些主要特点:

  • 跨浏览器支持: Playwright 支持多种浏览器,包括 Chromium(谷歌Chrome)、WebKit(Safari)和 Mozilla Firefox。

  • 自动化和可靠性: Playwright 设计用于在多种浏览器和设备上执行可靠的自动化测试,支持复杂的用户场景和交互操作。

  • 强大的API和调试能力: Playwright 提供了现代化的API,并且支持在测试运行时进行调试,帮助开发者更轻松地编写和维护复杂的测试用例。

Playwright 特别适合需要跨浏览器测试和在多种环境中验证应用程序稳定性的项目。

总结
  • Cypress 提供了强大的自动化测试能力和实时调试功能,适合需要高度交互性的应用。

  • Nightwatch.js 简化了端到端测试的编写和管理,适合需要与多种浏览器进行集成测试的项目。

  • Playwright 是一个跨浏览器的自动化测试工具,具有强大的API和灵活的测试调试能力。

✔ Add ESLint for code quality? … No / Yes

PS:是否使用ESLint 提高代码质量 官方地址:ESLint 中文网 (nodejs.cn)

✔ Add Prettier for code formatting? … No / Yes

PS:是否使用Prettier格式化代码 官方地址:Prettier 中文网 · Prettier 是一个“有态度”的代码格式化工具

✔ Add Vue DevTools 7 extension for debugging? (experimental) … No / Yes PS:是否使用 Vue DevTools 7 对你的项目进行debugger 官方地址:Home | Vue Devtools (vuejs.org)

为了学习期间,我这边是全部yes了,根据自己需求操作,以上后面分开展开看

关注公众号:资小库,快速答疑解惑

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/35589.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Go 延迟调用 defer

&#x1f49d;&#x1f49d;&#x1f49d;欢迎莅临我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:「stormsha的主页」…

硬件实用技巧:电阻精度和常用阻值表

若该文为原创文章&#xff0c;转载请注明原文出处 本文章博客地址&#xff1a;https://hpzwl.blog.csdn.net/article/details/139986658 长沙红胖子Qt&#xff08;长沙创微智科&#xff09;博文大全&#xff1a;开发技术集合&#xff08;包含Qt实用技术、树莓派、三维、OpenCV…

Linux Vim最全面的教程

Vim编辑器概述 Vim是一款功能强大的文本编辑器&#xff0c;广泛应用于Linux和Unix系统中。它是Vi编辑器的增强版&#xff0c;提供了更多的功能和更好的用户界面。Vim的特点包括多模式编辑、高度可配置性、丰富的插件生态系统以及强大的文本处理能力。 Vim的基本操作 Vim的基…

C++ 20新特性之模块

&#x1f4a1; 如果想阅读最新的文章&#xff0c;或者有技术问题需要交流和沟通&#xff0c;可搜索并关注微信公众号“希望睿智”。 为什么要引入模块 在C 20之前&#xff0c;所有的代码组织都依赖于预处理器和头文件。这种方式主要存在以下四个问题&#xff1a;一是大型项目中…

来了,你的第一个AI智能体

为了能直观的感受AI智能体&#xff0c;最好的方法是亲手开发一个智能体&#xff0c;当然&#xff0c;这个智能体不能太复杂&#xff0c;否则难度太大&#xff0c;会打击我们的热情的&#xff0c;热情是很宝贵的资源&#xff0c;必须要小心呵护。 我们在国内AI平台语聚AI上搭建…

Batch入门教程

Batch学习在多个领域有不同的应用&#xff0c;但最常见的是在机器学习和教育学习领域。以下是一个关于Batch学习入门的清晰指南&#xff0c;将分别介绍这两个领域中的Batch学习概念、方法和一些实用信息。 1. 机器学习中的Batch学习 定义与概念 Batch_Size&#xff1a;在机器…

RK3588 Android13 TvSetting 中增加 WebView 切换菜单

前言 电视产品,客户要求在设置中设备偏好设置子菜单下增加一个 WebView切换菜单,一开始不知道怎么下手,后来想起来在设置开发者选项里有一个类似的菜单, 去把实现逻辑搞出来应该就ok。 效果图 TvSetting 部分修改文件清单 packages/apps/TvSettings/Settings/res/values…

【吊打面试官系列-Mysql面试题】为表中得字段选择合适得数据类型

大家好&#xff0c;我是锋哥。今天分享关于 【为表中得字段选择合适得数据类型】面试题&#xff0c;希望对大家有帮助&#xff1b; 为表中得字段选择合适得数据类型 字段类型优先级: 整形>date,time>enum,char>varchar>blob,text 优先考虑数字类型&#xff0c;其次…

npm-check【实用教程】升级项目中的依赖

安装 npm-check npm i -g npm-check检查项目中的依赖 npm-check会显示项目中没有使用&#xff0c;以及有新版本的依赖 升级项目中的依赖 npm-check -u方向键上下可以移动图中左侧的箭头空格键可选中/取消选中标注为 Major Update 和 Non-semver 类的版本&#xff0c;需去官网查…

Python课程设计:python制作俄罗斯方块小游戏

基于python的俄罗斯方块小游戏 目录 基于python的俄罗斯方块小游戏 1.概述 1.1 摘要 1.2 开发背景 1.3 开发环境 1.4 实现功能 2.代码描述 2.1 模块导入 2.2 初始化变量 2.3 播放音乐 2.4 创建方块类 2.5 绘制游戏地图 2.6 游戏初始化 2.7 绘制有边框矩形 2.8 …

Curator框架的底层原理

Curator框架的底层原理主要围绕以下几个核心方面&#xff1a; 1. **异步操作**&#xff1a;Curator框架通过异步操作来提高性能和可扩展性。它使用Future、Callback或Watcher模式&#xff0c;允许在适当的时机返回结果或通知应用程序状态的变化。 2. **错误处理**&#xff1a…

【小沐学AI】Python实现语音识别(Whisper-Web)

文章目录 1、简介2、下载2.1 openai-whisper2.2 whisper-web 结语 1、简介 https://openai.com/index/whisper/ Whisper 是一种自动语音识别 &#xff08;ASR&#xff09; 系统&#xff0c;经过 680,000 小时的多语言和多任务监督数据的训练&#xff0c;从网络上收集。我们表…

VLAN的工作原理、划分方式、配置示例

随着网络技术的飞速发展&#xff0c;VLAN&#xff08;Virtual Local Area Network&#xff0c;虚拟局域网&#xff09;技术已成为网络分割和管理的重要工具。它不仅能提升网络的安全性和效率&#xff0c;还极大地增强了网络管理的灵活性。 VLAN概述 VLAN&#xff0c;即虚拟局…

ASPICE与ISO 26262在汽车行业中的协同关系

ASPICE&#xff08;Automotive Software Process Improvement and Capability dEtermination&#xff09;与ISO 26262之间的关系主要体现在以下几个方面&#xff1a; 1.目标和关注点&#xff1a; ASPICE&#xff1a;是一种软件和系统开发过程的评估和改进框架&#xff0c;专注…

Web前端第四次作业

目录 一、编写一个函数&#xff0c;形参是一个数组&#xff0c;返回数组中所有数字的平均值 二、编写一个函数&#xff0c;形参是一个数组&#xff0c;返回数组中的最大值 三、编写一个函数&#xff0c;形参是一个字符串&#xff0c;统计该字符串中每个字母出现的次数&#…

大数据之路 读书笔记 Day1

大数据之路 读书笔记 Day1 阿里巴巴大数据系统体系架构图 1. 数据采集层 #mermaid-svg-YqqD2w3qV6jc2aGP {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-YqqD2w3qV6jc2aGP .error-icon{fill:#552222;}#mermaid-sv…

2024.6.26 待学习知识点

" 取工单的组件 lt_aufnr CORRESPONDING #( lt_out MAPPING aufnr aufnr EXCEPT * ).ABAP POPUP_TO_CONFIRM 弹出框函数 CLASS-EVENTS CLASS-METHODS main. CLASS-METHODS raise_event_EXIT_COMMAND IMPORTING iv_ucomm TYPE sy-ucomm. PUBLIC SECTION. PROTECTED SE…

春风得意特斯拉(二)

科技品牌的命名也讲究独具特色和鲜明的辨识度&#xff0c;特斯拉为了致敬和纪念著名的物理学家尼古拉斯特斯拉&#xff0c;命名本身就具有先进性和领先性&#xff0c;而且是超越时代的领先性。如果缺乏时代高度和创造力&#xff0c;难以支撑品牌的市场地位。科技品牌命名简洁化…

一文看懂C++中的数字处理

在C编程中&#xff0c;数字处理是非常基础且重要的部分。C提供了多种数据类型和丰富的数学运算能力&#xff0c;使得开发者可以方便地进行各种数值计算。本文将介绍C中的基本数据类型、数字运算以及常用的数学函数&#xff0c;帮助读者更好地理解和应用C中的数字处理功能。 一…

中文检测程序(静态代码扫描)

欢迎您关注我们&#xff0c;经常分享有关Android出海&#xff0c;iOS出海&#xff0c;App市场政策实时更新&#xff0c;互金市场投放策略&#xff0c;最新互金新闻资讯等文章&#xff0c;期待与您共航世界之海。 在前些日子&#xff0c;给大家安利了我们在用的AS中文实时检测插…