npm创建Vue3项目

npm创建Vue3项目

  • 1 创建Vue项目
    • 说明
  • 2 安装
  • 3 运行

1 创建Vue项目

创建最新版的Vue项目,已经不推荐使用CLI构建方式了。参考如下即可。

npm create vue@latest

如果发现一直动不了,切换网络试一下,个人热点尝试一下。

按下图的选项按需引入自己需要的功能:
在这里插入图片描述

说明

选项说明
TypeScript 语法TypeScript 是一种由 Microsoft 开发的开源编程语言,它是 JavaScript 的超集,可以编译为纯 JavaScript。就是一种编程语言。
JSX 支持JSX 是一种 JavaScript 的语法扩展,通常用于构建 React 应用程序的用户界面。JSX 允许开发者在 JavaScript 中直接编写类似 HTML 的标记语法,使得编写和管理复杂的用户界面变得更加简单和直观。const element = \<div>Hello, World!\</div>;
Vue RouterVue Router 是 Vue.js 官方提供的路由管理器,用于构建单页面应用程序(SPA)。它允许你在 Vue.js 应用程序中实现基于 URL 的导航,并且能够以声明式的方式定义应用程序的路由映射关系。多组件开发选上,就是对页面每个部分解耦,可以按需导入。比如组成页面的nav、main、footer等分开开发。
PiniaPinia 是一个用于 Vue.js 的状态管理库,它专注于提供简单、轻量级且可扩展的状态管理解决方案。Pinia 提供了一种基于 Vue 3 的响应式 API 构建状态管理的方式,与 Vuex 相比,Pinia 更加灵活,并且在性能上有一些优势。在小型的Vue项目中,使用Vuex便足以,选否默认使用Vuex
VitestVitest 是一个用于 Vue.js 应用程序的测试运行器,它专注于提供简单、快速和可扩展的测试解决方案。Vitest 基于 Vite 构建,并且支持 Vue 3 和 Vue 2,能够帮助开发者在项目中进行单元测试和端到端测试。
端到端(End-to-End)测试在 Vue.js 项目中进行端到端(End-to-End)测试时,常用的工具包括 Cypress、Puppeteer、TestCafe 等。这些工具都能帮助你编写和执行端到端测试,并生成详细的测试报告
ESLintESLint 是一个开源的 JavaScript 代码检查工具,用于检查代码中的潜在问题、风格错误和代码质量问题。它可以帮助开发团队规范代码风格、发现潜在的错误,并提高代码的质量和可读性。

2 安装

npm install

在这里插入图片描述

3 运行

npm run dev

在这里插入图片描述

部署命令说明
npm run dev通常用于启动开发环境下的服务器或者构建工具。npm run dev 命令用于启动开发服务器,例如 webpack-dev-server、Vue CLI 的开发服务器等。npm run dev 可能会执行诸如编译、热重载、自动刷新等开发相关的任务,以提供一个方便的开发环境,使开发人员能够实时预览和调试项目。
npm run build用于构建项目的生产版本,生成用于部署的静态文件。当项目开发完成后,通常需要将项目打包成静态文件,以便部署到生产环境中。npm run build 命令会执行项目的构建过程,包括编译、压缩、打包等操作,最终生成用于生产环境的静态文件。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

[STM32+HAL]DengFOC移植之闭环位置控制

一、源码来源 DengFOC官方文档 二、HAL库配置 1、开启硬件IIC低速模式 低速更稳定 2、PWM波开启 三、keil填写代码 1、AS5600读取编码器数值 #include "AS5600.h" #include "math.h"float angle_prev0; int full_rotations0; // full rotation trac…

OSCP靶场--Hawat

OSCP靶场–Hawat 考点(目录扫描zip文件下载java代码审计web1的sql注入写到web2的webshel) 1.nmap扫描 ## ┌──(root㉿kali)-[~/Desktop] └─# nmap 192.168.158.147 -sV -sC -Pn --min-rate 2500 -p- Starting Nmap 7.92 ( https://nmap.org ) at 2024-04-11 07:18 EDT …

性能优化-01

当看到性能指标时&#xff0c;你会首先想到什么呢&#xff1f;我相信 “高并发” 和 “响应快” 一定是最先出现在你脑海里的两个词&#xff0c;而它们也正对应着性能优化的两个核心指标—— “吞吐” 和 “延时” 。这两个指标是从应用负载的视角来考察性能&#xff0c;直接影…

python爬虫----BeautifulSoup(第二十天)

&#x1f388;&#x1f388;作者主页&#xff1a; 喔的嘛呀&#x1f388;&#x1f388; &#x1f388;&#x1f388;所属专栏&#xff1a;python爬虫学习&#x1f388;&#x1f388; ✨✨谢谢大家捧场&#xff0c;祝屏幕前的小伙伴们每天都有好运相伴左右&#xff0c;一定要天天…

组合数学<1>——组合数学基础

今天我们聊聊组合数学。(本期是给刚刚学习组合数学的同学看的&#xff0c;dalao们可以自行忽略) 建议:不会求逆元的出门左转数论<2>&#xff0c;不会数论的出门右转数论<1>。 加乘原理 加乘原理小学奥数就有。 总的来说:加法原理:分类;乘法原理:分步 比如说&a…

景芯2.5GHz A72训练营dummy添加(一)

景芯A72做完布局布线之后导出GDS&#xff0c;然后进行GDS merge&#xff0c;然后用Calibre对Layout添加Dummy。在28nm以及之前的工艺中&#xff0c;Dummy metal对Timing的影响不是很大&#xff0c;当然Star RC也提供了相应的解决方案&#xff0c;可以考虑Dummy metal来抽取RC。…

【Vector-Map-路径规划(0)】卷首语

因为城市NOA 的开发过程中&#xff0c;十字路口这类场景非常不好处理&#xff0c;个人对路径规划没有什么基础&#xff0c;只知道深度优先&#xff0c;广度优先&#xff0c;A*&#xff0c;Dijkstra等算法&#xff0c;不知道在矢量地图中如何使用&#xff1f;因此花几天时间读几…

【LangChain系列】2. 一文全览LangChain数据连接模块:从文档加载到向量检索RAG,理论+实战+细节

本文学习 LangChain 中的 数据连接&#xff08;Retrieval&#xff09; 模块。该模块提供文档加载、切分&#xff0c;向量存储、检索等操作的封装。最后&#xff0c;结合RAG基本流程&#xff0c;我们将利用LangChain实现RAG的基本流程。 0. 模块介绍 在前面文章中我们已经讲了…

ssm042在线云音乐系统的设计与实现+jsp

在线云音乐系统的设计与实现 摘 要 随着移动互联网时代的发展&#xff0c;网络的使用越来越普及&#xff0c;用户在获取和存储信息方面也会有激动人心的时刻。音乐也将慢慢融入人们的生活中。影响和改变我们的生活。随着当今各种流行音乐的流行&#xff0c;人们在日常生活中经…

MySQL 连接查询

目录 连接查询 命令格式&#xff1a; 内连接&#xff1a; 等值连接&#xff1a; 格式&#xff1a; 非等值连接&#xff1a; 格式&#xff1a; 外连接&#xff1a; 左连接&#xff1a; 格式: 结果&#xff1a; 右连接&#xff1a; 格式: 结果&#xff1a; 全外连…

D-LinkNAS 远程命令执行漏洞(CVE-2024-3273)RCE漏

声明&#xff1a; 本文仅用于技术交流&#xff0c;请勿用于非法用途 由于传播、利用此文所提供的信息而造成的任何直接或者间接的后果及损失&#xff0c;均由使用者本人负责&#xff0c;文章作者不为此承担任何责任。 简介 D-LinkNAS是由D-Link公司制造的网络附加存储设备。…

01 SQL基础 -- 初识数据库与安装

一、初识数据库 数据库是将大量数据保存起来,通过计算机加工而成的可以进行高效访问的数据集合。该数据集合称为数据库(Database, DB)。用来管理数据库的计算机系统称为数据库管理系统(Database Management System, DBMS) 1.1 DBMS 的种类 DBMS 主要通过数据的保存格式…

公众号答疑集锦(4月)之IE,二维声纳,hypack处理内河多波束

1、Inertial Explorer这款软件怎么导出txt或csv格式的轨迹文件&#xff1f; 答&#xff1a;https://mp.weixin.qq.com/s/Rtl_3YJjDQblyVPLXjAmhA。 问&#xff1a;软件需要一个EGM96-World.wpg格式的文件&#xff0c;就是IE这家公司特有的文件格式。我登录他们官网&#xff0…

JAVAEE之Spring AOP

1. AOP概述 AOP是Spring框架的第⼆⼤核⼼(第⼀⼤核⼼是IoC) 1.1 什么是AOP&#xff1f; • Aspect Oriented Programming&#xff08;⾯向切⾯编程&#xff09; 什么是⾯向切⾯编程呢? 切⾯就是指某⼀类特定问题, 所以AOP也可以理解为⾯向特定⽅法编程. 什么是⾯向特定⽅法编…

OpenHarmony南向开发-Docker编译环境

Docker环境介绍 OpenHarmony为开发者提供了两种Docker环境&#xff0c;以帮助开发者快速完成复杂的开发环境准备工作。两种Docker环境及适用场景如下&#xff1a; 独立Docker环境&#xff1a;适用于直接基于Ubuntu、Windows操作系统平台进行版本编译的场景。 基于HPM的Docker…

宏定义(超级详细)

宏定义在编程里面也有十分重要的作用&#xff0c;下面我就来详细介绍一下&#xff1a; 宏的特点 宏主要特点是它在预编译的时候就会被数字或者代码字符替换掉。这样可以将一些重复的变量替换掉&#xff0c;方便我们进行修改&#xff0c;只需要修改宏定义就行了。 宏的几大类…

《一》Qt的概述

1.1 什么是Qt Qt是一个跨平台的C图形用户界面应用程序框架。它为应用程序开发者提供建立图形界面所需的所有功能。它是完全面向对象的&#xff0c;很容易扩展&#xff0c;并且允许真正的组件编程。 1.2 Qt的发展史 1991年 Qt最早由芬兰奇趣科技开发 1996年 进入商业领域&#x…

2024年mathorcup(妈妈杯)数学建模C题思路-物流网络分拣中心货量预测及人员排班

# 1 赛题 C 题 物流网络分拣中心货量预测及人员排班 电商物流网络在订单履约中由多个环节组成&#xff0c;图 ’ 是一个简化的物流 网络示意图。其中&#xff0c;分拣中心作为网络的中间环节&#xff0c;需要将包裹按照不同 流向进行分拣并发往下一个场地&#xff0c;最终使包裹…

matlab conv2

MATLAB卷积conv、conv2、convn详解-CSDN博客

全面学习SpringCloud框架指南

要深入学习Spring Cloud框架,你需要系统地掌握其核心组件和概念,并了解如何在实际项目中应用这些知识。以下是一些关键的学习点和相应的学习内容: 一共分为10个模块包括: 1、微服务架构基础: 理解微服务架构的概念和优势。 学习单体架构向微服务架构演进的过程。 掌握…