基于Vite创建简单Vue3工程

首先安装node.js环境,没有node.js环境,便没有npm命令。

1、Vue3创建执行命令

D:\TABLE\test>npm create vue@latestVue.js - The Progressive JavaScript Framework√ 请输入项目名称: ... vue_test
√ 是否使用 TypeScript 语法? ... 否 / 是  (选择 是)
√ 是否启用 JSX 支持? ... 否 / 是  (选择 否)
√ 是否引入 Vue Router 进行单页面应用开发? ... 否 / 是  (选择 否)
√ 是否引入 Pinia 用于状态管理? ... 否 / 是  (选择 否)
√ 是否引入 Vitest 用于单元测试? ... 否 / 是 (选择 否)
√ 是否要引入一款端到端(End to End)测试工具? » 不需要 (选择 不需要)
√ 是否引入 ESLint 用于代码质量检测? ... 否 / 是 (选择 否)正在构建项目 D:\TABLE\test\vue_test...项目构建完成,可执行以下命令:cd vue_testnpm installnpm run dev

2、打开项目,在终端输入npm i 安装所有依赖。

在这里插入图片描述

3、入口文件是 index.html

在这里插入图片描述

4、启动项目 npm run dev

在这里插入图片描述

5、点击链接访问

在这里插入图片描述

6、访问效果

在这里插入图片描述

power by 尚硅谷

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

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

相关文章

UntiyShader(五)属性、内置文件和变量

目录 一、如何使用属性 例子 ShaderLab中的属性的类型和Cg中的变量的类型之间的匹配关系

网络安全-真实ip获取伪造与隐藏挖掘

目录 真实ip获取应用层网络层网络连接TOAproxy protocol ip伪造应用层网络层TOA攻击proxy protocol 隐藏代理 挖掘代理多地ping历史DNS解析记录国外主机解析域名网站RSS订阅网络空间搜索引擎 总结参考 本篇文章学习一下如何服务如何获取真实ip,隐藏自己的ip&#xf…

yolov8 tracking编码为web 和 rtsp流输出

1 基础工作 打开cmd 输入 conda env list 输入 conda activate py38 查看 nvidia-smi 查看 nvcc,如下图所示 cuda为11.7 ,为确认可以查看program files 下面的cuda 安装,看到11.7 就行了,读者可以自行确认自己的版本。 查看nvid…

【基础】【Python网络爬虫】【2.请求与响应】常用请求报头和常用响应方法

Python网络爬虫基础 爬虫基础请求与相应HTTP/HTTPS 协议HTTP/HTTPS的优缺点HTTP 的缺点HTTPS的优点 请求与响应概述请求请求目标(url)请求体(response)常用的请求报头查看请求体(requests 模块) 响应HTTP响…

PS实现圆角矩形选取

在我们日常的工作当中,经常需要做圆角矩形的图片,因为圆角的图片给人的感觉比较圆润,漂亮,但是PS在这方面显然比较弱智,因此如何做圆角矩形选择,这里给出了两个方法,希望能帮到大家。 进入正题(方法一): 第一步-PS 右上角-打开一张图片 第二步-左列-选择矩形-选择目…

2024新年快乐

今天就不讲题解了&#xff0c;2024年&#xff0c;祝所有博客身体健康&#xff0c;粉丝越多&#xff0c;点赞越高&#xff01;&#xff01;&#xff01; #include<bits/stdc.h> using namespace std; int main(){cout<<"新年快乐!!";return 0&#xff1b;…

汽车信息安全--车规MCU信息安全设计应采用哪种安全架构?

目录 1.问题引入 2.常见网络安全架构简述 2.1 边界防御架构 2.2 纵深防御架构

【小沐学Python】Python实现免费天气预报获取(OpenWeatherMap)

文章目录 1、简介1.1 工具简介1.2 费用1.3 注册1.4 申请key 2、接口说明2.1 One Call 3.02.2 Current Weather and Forecasts collection2.2.1 API 调用2.2.2 API 参数 2.3 Historical Weather collection2.4 Weather Maps collection2.5 Other weather APIs 3、接口测试3.1 例…

JavaFX:MVC模式学习01-使用PropertyValueFactory将模型与视图绑定

PropertyValueFactory类是“TableColumn cell value factory”,绑定创建列表中的项。示例如下&#xff1a; TableColumn<Person,String> firstNameCol new TableColumn<Person,String>("First Name");firstNameCol.setCellValueFactory(new PropertyVal…

hyper-v用命令方式创建NAT网络

文章目录 NAT 概述创建 NAT 虚拟网络配置vm的ip地址 NAT 概述 NAT 使用主计算机的 IP 地址和端口通过内部 Hyper-V 虚拟网关向虚拟机授予对网络资源的访问权限。 网络地址转换 (NAT) 是一种网络模式&#xff0c;旨在通过将一个外部 IP 地址和端口映射到更大的内部 IP 地址集来…

IIS服务器发布PHP网站

IIS服务器&#xff0c;相信开发者都不会陌生&#xff0c;它的英文全称是Internet Information Services&#xff0c;是由微软公司提供的基于运行Microsoft Windows的互联网基本服务&#xff0c;常用于Windows系统的Web项目部署&#xff0c;本篇以PHP项目为例&#xff0c;讲解如…

R_handbook_作图专题

ggplot基本作图 1 条形图 library(ggplot2) ggplot(biopics) geom_histogram(aes(x year_release),binwidth1,fill"gray") 2 堆砌柱状图 ggplot(biopics, aes(xyear_release)) geom_bar(aes(fillsubject_sex)) 3 堆砌比例柱状图 ggplot(biopics, aes(xyear_rele…

idea 出现Cannot resolve symbol ‘springframework‘解决方法

Maven手动重新加载 1&#xff09;File–>Invalidate Caches / Restart… 清理缓存&#xff0c;重启idea客户端 2&#xff09;File–>Maven–>Reload project重新从maven中加载工程依赖的组件

51单片机项目(24)——基于51单片机的温控风扇protues仿真

1.功能设计 使用传感器测量温度&#xff0c;并将温度显示在LCD1602上。如果温度超过阈值&#xff0c;那么就打开风扇&#xff0c;否则风扇不打开。&#xff08;仿真的时候&#xff0c;用直流电机模拟风扇&#xff09;。 仿真截图如下&#xff1a; 此时温度是27度&#xff0c;我…

FA组件详解

1、了解FA核心组件以及功能 &#xff08;1&#xff09;TC&#xff08;Thin Client&#xff1a;瘦终端&#xff09;&#xff1a;就是类似于机顶盒的一个小盒子&#xff0c;里面有CPU、内存、USB、MIC、HDMI等接口&#xff0c;可以理解为小型电脑&#xff0c;但是它里面是没有操作…

CSS 文字溢出:多行溢出、一行溢出

CSS 文字溢出&#xff1a;多行溢出、一行溢出 案例请点击查看文章详情。 代码如下&#xff1a; 多行溢出设置&#xff1a; .line-clamp-2{/* height: 52px;line-height: 25px; */overflow: hidden;word-break: break-all;text-overflow: ellipsis;display: -webkit-box;-webkit…

Leetcode的AC指南 —— 字符串:344. 反转字符串

摘要&#xff1a; Leetcode的AC指南 —— 字符串&#xff1a;344. 反转字符串。题目介绍&#xff1a;编写一个函数&#xff0c;其作用是将输入的字符串反转过来。输入字符串以字符数组 s 的形式给出。不要给另外的数组分配额外的空间&#xff0c;你必须原地修改输入数组、使用 …

【C#与Redis】--实践案例--案例 1:使用 Redis 实现缓存

在使用 Redis 实现缓存的案例中&#xff0c;我们可以使用 StackExchange.Redis 库&#xff0c;这是一个为 .NET 提供的 Redis 客户端库。以下是一个简单的使用 Redis 缓存的 C# 示例&#xff1a; 首先&#xff0c;你需要安装 StackExchange.Redis 库。可以通过 NuGet 包管理器…

python使用openpyxl操作excel

文章目录 前提读取已有excel创建一个excel工作簿对象创建excel工作簿中的工作表获取工作表第一种&#xff1a;.active 方法第二种&#xff1a;通过工作表名获取指定工作表​​​​​​第三种&#xff1a;.get_sheet_name() 修改工作表的名称数据操作写入数据按单元格写入通过指…

ArkTS语言基础入门学习-鸿蒙开发

文章目录 前言ArkTS简介统一的开发体验ArkTS语言优势ArkTS语言实战演示ArkTS语言的性能与跨平台适配ArkTS和TypeScript区别总结前言 本篇文章将深入介绍鸿蒙开发的主力语言——ArkTS语言,并通过比较传统网页开发模式和ArkTS开发模式,揭示ArkTS语言的独特之处以及其带来的开发…