新手Vite打包工具的使用并解决yarn create vite报错
一、手动创建
1.创建vite-Demo文件夹

2.初始化
yarn init -y

3.安装vite
yarn add -D vite

4.打包准备
说明:不需要在src下面创建,在vite-Demo文件夹创建
4.1index.js文件
document.body.insertAdjacentHTML("beforeend","<h1>你好vite</h1>")
4.2index.html文件
说明: <script type="module" src="./index.js"></script>中module很关键。浏览器以 ES 模块的方式加载 JavaScript 文件。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script type="module" src="./index.js"></script>
</head>
<body></body>
</html>
5.打包
说明:相当于运行在服务器,实际没有打包
yarn vite


6.构建
说明:因为 build 命令会生成优化和压缩后的静态文件,而不是一个开发服务器。要查看打包后的效果,你需要将生成的静态文件部署到一个 Web 服务器上,然后通过浏览器访问部署后的应用程序。
yarn vite build

7.预览
说明:预览打包后的代码,可以解决本地查看构建效果,不用放在服务器
yarn vite preview

二、 一键式启动
1.命令
yarn create vite
说明:但是报错。

2.解决问题
说明:执行下面代码,查看是否在同一个盘符。我这很明显不是
yarn global dir
yarn global bin

解决:
说明:路径就是安装node位置的地方
yarn config set global-folder "D:\universal\nvm\v16.20.1\node_global"
yarn config set prefix "D:\universal\nvm\v16.20.1\node_cache"

再次查看

完美结局
3. 输入项目名称
4.本人输入的是vite_demo2

5.选择Vanilla
说明:Vanilla 通常用来指代原始的、未经框架或库封装的纯粹的编程语言或技术。也就是JavaScript。

6.选择JavaScript

7.创建成功

相关文章:
新手Vite打包工具的使用并解决yarn create vite报错
一、手动创建 1.创建vite-Demo文件夹 2.初始化 yarn init -y 3.安装vite yarn add -D vite 4.打包准备 说明:不需要在src下面创建,在vite-Demo文件夹创建 4.1index.js文件 document.body.insertAdjacentHTML("beforeend","<h1>…...
SpringMVC框架——First Day
目录 三层架构 MVC模型 SpringMVC 快速入门案例 SpringMVC的概述(了解) SpringMVC在三层架构的位置 SpringMVC的优势(了解) 创建SpringMVC的Maven项目 1.在pom.xml中添加所需要的jar包 2.在工程的web.xml中配置核心Spring…...
基于C++雪花算法工具类Snowflake -来自chatGPT
#include <iostream> #include <chrono> #include <stdexcept>class Snowflake { private:// 雪花算法的各个参数static constexpr int64_t workerIdBits 5;static constexpr int64_t datacenterIdBits 5;static constexpr int64_t sequenceBits 12;stati…...
若依打印sql
官方issue 自动生成的代码,sql日志怎么没有打印 在ruoyi-admin中的application.yml配置如下。 # 日志配置,默认 logging:level:com.ruoyi: debugorg.springframework: warn#添加配置com.ying: debug输出sql...
Camunda BPM Run下载(7.20)
官网地址: https://camunda.com/ 中文站点:http://camunda-cn.shaochenfeng.com https://downloads.camunda.cloud/release/camunda-bpm/run/7.20/https://downloads.camunda.cloud/release/camunda-bpm/run/7.20/camunda-bpm-run-7.20.0-alpha3.ziphttps://downloads.camunda…...
【Ubuntu】Ubuntu 22.04 升级 OpenSSH 9.3p2 修复CVE-2023-38408
升级原因 近日Openssh暴露出一个安全漏洞CVE-2023-38408,以下是相关资讯: 一、漏洞详情 OpenSSH是一个用于安全远程登录和文件传输的开源软件套件。它提供了一系列的客户端和服务器程序,包括 ssh、scp、sftp等,用于在网络上进行…...
【知网检索】2023年金融,贸易和商业管理国际学术会议(FTBM2023)
随着经济全球化,贸易自由化的进程加快,我国经济对外开放程度不断加深,正在加快融入世界经济一体化当中。当今世界各国竞争过程中,金融、贸易以及商业形态已成为其关键与焦点竞争内容。 2023年金融、贸易和商业管理国际学术会议(F…...
数据可视化:Matplotlib详解及实战
1 Matplotlib介绍 Matplotlib是Python中最常用的可视化工具之一,可以非常方便地创建海量类型的2D图表和一些基本的3D图表。 Matplotlib提供了一个套面向绘图对象编程的API接口,能够很轻松地实现各种图像的绘制,并且它可以配合Python GUI工具(…...
Flutter flutter_boost 集成
刚开始接触使用flutter boost路由的心得体会记录如下: Fltter项目部分: 第一步 在Flutter项目的 pubspec.yaml文件中添加如下信息: flutter_boost:git:url: https://github.com/alibaba/flutter_boost.gitref: 4.3.0之后在flutter工程下运…...
Stable Diffusion中人物生成相关的negative prompts
下面是常用的negative prompt,在使用stable Diffusion webui等工具生成时可以填入。 bad anatomy, bad proportions, blurry, cloned face, deformed, disfigured, duplicate, extra arms, extra fingers, extra limbs, extra legs, fused fingers, gross proporti…...
QT - 建立页面
一、生成页面 二、实现 1.LineEdit 是一个单行输入文本框,为用户提供了比较多的编辑功能,例如选择复制、粘贴。 修改echomode属性为password Push Button(常规按钮) 三、程序 声明全局变量,属于MainWindow private: // 定义了一个指向Ma…...
python中几个有趣的函数和推导式
前言 嗨喽~大家好呀,这里是魔王呐 ❤ ~! 一、range()函数 1、range()通常用来做循环。 2、range()生成器的特性。 例子:假如range()中使用的数值特别大,为100000000000000000000000000000? python解释…...
【Jenkins】Jenkins 安装
Jenkins 安装 文章目录 Jenkins 安装一、安装JDK二、安装jenkins三、访问 Jenkins 初始化页面 Jenkins官网地址:https://www.jenkins.io/zh/download/ JDK下载地址:https://www.oracle.com/java/technologies/downloads/ 清华源下载RPM包地址ÿ…...
LNMP搭建以及Discuz论坛部署
目录 LNMP 编译安装 LNMP搭建 Nginx 服务 MySQL 服务 PHP 解析环境 部署 Discuz社区论坛 LNMP 目前成熟的企业网站的应用模式之一,指的是一套协同工作的系统和相关软件,能提供静态页面服务和动态web服务 L linux系统 N nginx网站服务࿰…...
MGRE综合
实验 一、实验思路 1.先按照上图配置IP地址及环回 2.写缺省使公网可通 3.让R1、R4、R5每台路由器均成为中心站点形成全连网状结构拓扑 4.让R1成为中心站点R2R3为分支站点 5.分区域宣告ospf之后更改ospf在虚拟接口Tunnel工作方式为broadcast及让R1 当选DR 二、上虚拟机操作…...
hcip的mgre和ospf实验
题目 拓扑图 一、配置环回和IP地址 R1 < Huawei>sy Enter system view, return user view with CtrlZ. [Huawei]sysname r1 [r1]int g0/0/1 [r1-GigabitEthernet0/0/1]ip add 64.1.1.1 24 Aug 4 2023 18:56:07-08:00 r1 %%01IFNET/4/LINK_STATE(l)[0]:The line protocol…...
gdb学习笔记
参考:https://blog.csdn.net/Stars_WW/article/details/88994391 gdb常用交互命令 启动gdb后,进入到交互模式,通过以下命令完成对程序的调试;注意高频使用的命令一般都会有缩写,熟练使用这些缩写命令能提高调试的效率;…...
java -jar指定外部配置文件
场景 spingboot项目部署jar时,需要时常修改配置,为了方便,将配置文件放到jar包外 操作步骤 在jar包同级目录下创建config文件夹(位置没有强制要求,为了方便而已) 在jar包同级目录下创建start.bat文件,并编辑内容 echo off :: 命令窗口标题 title yudibei_performance_tes…...
【IDEA】常用插件清单
【IDEA】常用插件清单 arthas ideaCodeium: AI Autocomplete for xxxCommit-MessageGenerateAllSetterMaven HelperMybatisPlusOne Dark themePDF ViewerRainbow BracketsRestfulToolSequenceDiagramSonarLintTranslation arthas idea 快捷生成arthas命令 Codeium: AI Autoc…...
私域流量运营数据分析:6个关键指标
随着数字化时代的到来,私域流量运营已经成为企业营销的重要策略。然而,要确保私域流量运营的有效性和成功,数据分析是至关重要的一环。通过对运营数据进行深入分析,企业可以了解用户行为和趋势,发现问题和机遇…...
eNSP-Cloud(实现本地电脑与eNSP内设备之间通信)
说明: 想象一下,你正在用eNSP搭建一个虚拟的网络世界,里面有虚拟的路由器、交换机、电脑(PC)等等。这些设备都在你的电脑里面“运行”,它们之间可以互相通信,就像一个封闭的小王国。 但是&#…...
web vue 项目 Docker化部署
Web 项目 Docker 化部署详细教程 目录 Web 项目 Docker 化部署概述Dockerfile 详解 构建阶段生产阶段 构建和运行 Docker 镜像 1. Web 项目 Docker 化部署概述 Docker 化部署的主要步骤分为以下几个阶段: 构建阶段(Build Stage):…...
RocketMQ延迟消息机制
两种延迟消息 RocketMQ中提供了两种延迟消息机制 指定固定的延迟级别 通过在Message中设定一个MessageDelayLevel参数,对应18个预设的延迟级别指定时间点的延迟级别 通过在Message中设定一个DeliverTimeMS指定一个Long类型表示的具体时间点。到了时间点后…...
PHP和Node.js哪个更爽?
先说结论,rust完胜。 php:laravel,swoole,webman,最开始在苏宁的时候写了几年php,当时觉得php真的是世界上最好的语言,因为当初活在舒适圈里,不愿意跳出来,就好比当初活在…...
java 实现excel文件转pdf | 无水印 | 无限制
文章目录 目录 文章目录 前言 1.项目远程仓库配置 2.pom文件引入相关依赖 3.代码破解 二、Excel转PDF 1.代码实现 2.Aspose.License.xml 授权文件 总结 前言 java处理excel转pdf一直没找到什么好用的免费jar包工具,自己手写的难度,恐怕高级程序员花费一年的事件,也…...
【网络安全产品大调研系列】2. 体验漏洞扫描
前言 2023 年漏洞扫描服务市场规模预计为 3.06(十亿美元)。漏洞扫描服务市场行业预计将从 2024 年的 3.48(十亿美元)增长到 2032 年的 9.54(十亿美元)。预测期内漏洞扫描服务市场 CAGR(增长率&…...
DIY|Mac 搭建 ESP-IDF 开发环境及编译小智 AI
前一阵子在百度 AI 开发者大会上,看到基于小智 AI DIY 玩具的演示,感觉有点意思,想着自己也来试试。 如果只是想烧录现成的固件,乐鑫官方除了提供了 Windows 版本的 Flash 下载工具 之外,还提供了基于网页版的 ESP LA…...
k8s业务程序联调工具-KtConnect
概述 原理 工具作用是建立了一个从本地到集群的单向VPN,根据VPN原理,打通两个内网必然需要借助一个公共中继节点,ktconnect工具巧妙的利用k8s原生的portforward能力,简化了建立连接的过程,apiserver间接起到了中继节…...
爬虫基础学习day2
# 爬虫设计领域 工商:企查查、天眼查短视频:抖音、快手、西瓜 ---> 飞瓜电商:京东、淘宝、聚美优品、亚马逊 ---> 分析店铺经营决策标题、排名航空:抓取所有航空公司价格 ---> 去哪儿自媒体:采集自媒体数据进…...
让回归模型不再被异常值“带跑偏“,MSE和Cauchy损失函数在噪声数据环境下的实战对比
在机器学习的回归分析中,损失函数的选择对模型性能具有决定性影响。均方误差(MSE)作为经典的损失函数,在处理干净数据时表现优异,但在面对包含异常值的噪声数据时,其对大误差的二次惩罚机制往往导致模型参数…...
