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 命令会执行项目的构建过程,包括编译、压缩、打包等操作,最终生成用于生产环境的静态文件。

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

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

相关文章

提升编程效率的秘密武器:IntelliJ IDEA

IntelliJ IDEA的基本介绍 正如一个故事的开头&#xff0c;我们从一个名字开始 - IntelliJ IDEA。这是一个在程序员中广受欢迎的集成开发环境&#xff08;IDE&#xff09;&#xff0c;由捷克公司JetBrains开发。它的名字听起来有些复杂&#xff0c;但实际上&#xff0c;它的功能…

AMD Tensile 简介与示例

按照知其然&#xff0c;再知其所以然的认知次序进行 1&#xff0c;下载代码 git clone --recursive https://github.com/ROCm/Tensile.git 2&#xff0c;安装 Tensile cd Tensile mkdir build cd build ../Tensile/bin/Tensile ../Tensile/Configs/rocblas_dgemm_nn_asm_full…

算法 分割字符串为实体类

题目 String userData "10000:张三:男:1998-01-01#10001:张三:男:1998-01-01#10002:李四:女:1999-02-02#10003:王五:男:2000-03-03#10004:赵六:女:2001-04-04"; String[] usersArray userData.split("#"); // 使用Stream API将字符串数组转换为SysUser对…

【计算机毕业设计】音乐论坛App管理系统——后附源码

&#x1f389;**欢迎来到琛哥的技术世界&#xff01;**&#x1f389; &#x1f4d8; 博主小档案&#xff1a; 琛哥&#xff0c;一名来自世界500强的资深程序猿&#xff0c;毕业于国内知名985高校。 &#x1f527; 技术专长&#xff1a; 琛哥在深度学习任务中展现出卓越的能力&a…

C++ | Leetcode C++题解之第21题合并两个有序链表

题解&#xff1a; 题解&#xff1a; class Solution { public:ListNode* mergeTwoLists(ListNode* l1, ListNode* l2) {ListNode* preHead new ListNode(-1);ListNode* prev preHead;while (l1 ! nullptr && l2 ! nullptr) {if (l1->val < l2->val) {prev-…

【vue】v-if 条件渲染

v-if 不适用于频繁切换显示模式的场景 修改web.user&#xff0c;可看到条件渲染的效果 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initi…

.NET MAUI使用Visual Studio Android Emulator(安卓模拟器)运行

Android Emulator&#xff08;安卓模拟器&#xff09;运行&#xff1a; 安卓模拟器一直卡在不动&#xff1a; 在某些情况下&#xff0c;在“打开或关闭 Windows 功能”对话框中启用 Hyper-V 和 Windows 虚拟机监控程序平台后可能无法正确启用Hyper-V。 我就是开启Hyper-V才把安…

测试领域革新:ChatGPT助你轻松编写测试方案!

简介 测试方案是指描述需要被测产品的特性、测试的方法、测试环境的规划、测试工具的设计和选择、测试用例的设计方法、测试代码的设计方案。 我们常常需要根据产品的特性、测试策略等几个方向输出对应的测试方案。在写测试方案的过程中&#xff0c;常常会碰到没有头绪的问题…

卫星导航双频低噪声放大器芯片—ATR2701

ATR2701 是一款专门针对卫星导航 L1 和 L2 双频段应用而设计的高增益、低噪声系数射频放大器。 ATR2701 芯片采用采用 2 级放大器的结构设计&#xff0c;具有 28 dB 高增益和 0.85dB 的低噪声系数。芯片支持 3.3V 至 5V 宽电源供电。芯片采用 2.1 mm X 2.3 mm 1 mm 的 SOT 封…

Promise简单概述

一. Promise是什么&#xff1f; 理解 1.抽象表达&#xff1a; Promise是一门新的技术(ES6规范) Promise是JS中进行异步编程的新解决方案(旧方案是单纯使用回调函数) 异步编程&#xff1a;包括fs文件操作&#xff0c;数据库操作(Mysql)&#xff0c;AJAX&#xff0c;定时器 2.具…

使用Nodejs + express连接数据库mongoose

文章目录 先创建一个js文档安装 MongoDB 驱动程序&#xff1a;引入 MongoDB 模块&#xff1a;设置数据库连接&#xff1a;新建一个表试试执行数据库操作&#xff1a;关闭数据库连接&#xff1a; 前面需要准备的内容可看前面的文章&#xff1a; Express框架搭建项目 node.js 简单…

Java高频面试之JVM篇

说一下 Jvm 的主要组成部分&#xff1f;及其作用&#xff1f; 类加载器执行器运行时数据区域本地接口 谈谈对运行时数据区的理解&#xff1f; 堆和栈的区别是什么&#xff1f; 堆中存什么&#xff1f;栈中存什么&#xff1f; 堆总存对象,栈中存局部变量,引用 为什么要把堆…

什么牌子的运动耳机比较好?五款舒适又实用的运动耳机推荐

跑步、健身、游泳……无论你的运动喜好是什么&#xff0c;一款好的运动蓝牙耳机都能为你的运动体验加分。然而&#xff0c;市面上的运动蓝牙耳机品牌众多&#xff0c;如何选择一款既舒适又实用的产品呢&#xff1f;本文将为你提供一些选购运动蓝牙耳机建议&#xff0c;并为你推…

数字时代的新风向标:海外网红营销与年轻一代的话题热潮

随着互联网的不断普及和社交媒体的迅猛发展&#xff0c;海外网红营销已成为引领年轻一代话题热潮的重要力量。这一趋势不仅改变了传统营销模式&#xff0c;更深刻地影响了年轻人的消费观念、审美趣味以及生活方式。本文Nox聚星将和大家探讨海外网红营销如何成功地吸引了年轻人的…

智能合约平台开发指南

随着区块链技术的普及&#xff0c;智能合约平台已经成为了这个领域的一个重要趋势。智能合约可以自动化执行合同条款&#xff0c;大大减少了执行和监督合同条款所需的成本和时间。那么&#xff0c;如何开发一个智能合约平台呢&#xff1f;以下是一些关键步骤。 一、选择合适的区…

mysql重启失败

服务器重启了一下&#xff0c;然后启动后发现mysql自动启动没有生效&#xff0c;于是手动通过systemctl启动mysqld&#xff0c;然后就报错:Starting MySQL...........The server quit without updating P[FAILED](/data/mysql/iz2zebvmy1qv3fao9c5riuz.pid). 根据配置my.cnf文…

为什么选择成为程序员?

目录 兴趣和热爱高薪和就业机会持续学习和不断成长挑战和乐趣 兴趣和热爱 许多人选择成为程序员可能是热爱&#xff0c;对计算机&#xff0c;以及编程和科技产生了浓厚的兴趣&#xff0c;并且享受着解决每一个技术问题&#xff0c;构建应用程序和探索新技术所带来的乐趣。 谈到…

二进制ip地址如何进行掩码网络地址和cidr划分?

看到网上有人问下面的问题&#xff1a; 解答过程&#xff1a; 首先这是一个默认的abc类地址进行cidr变长掩码划分的问题。 首先我们知道&#xff0c;ip地址是32位二进制&#xff0c;为了记忆方便每8位分成四段&#xff0c;用0-255和符号.来表示如192.168.1.100 ip地址具有寻址…

海外媒体发稿:新加坡 Asia One VS新加坡sg雅虎

海外媒体发稿&#xff1a;新加坡 Asia One VS新加坡sg雅虎 新加坡&#xff1a;雅虎 官网&#xff1a;sy.yahoo.com 官网&#xff1a;asiaone.com/lite 亚洲第一站。是 新加坡的新闻和生活方式网站和新闻聚合器。它是 新加坡第一个纯数字 内容平台&#xff0c;主要为新加坡、…

功能测试_验证新浪邮箱登录的正确性

案例&#xff1a;验证验证新浪邮箱登录的正确性 功能测试_等价类设计用例&#xff1a; 步骤&#xff1a; 1:明确需求&#xff1a;邮箱能否登录 2:划分等价类&#xff1a;有效等价类、有效取值、无效等价类、无效取值 3&#xff1a;提取数据编写用例&#xff1a;用例编号、…