新手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个关键指标
随着数字化时代的到来,私域流量运营已经成为企业营销的重要策略。然而,要确保私域流量运营的有效性和成功,数据分析是至关重要的一环。通过对运营数据进行深入分析,企业可以了解用户行为和趋势,发现问题和机遇…...
(LeetCode 每日一题) 3442. 奇偶频次间的最大差值 I (哈希、字符串)
题目:3442. 奇偶频次间的最大差值 I 思路 :哈希,时间复杂度0(n)。 用哈希表来记录每个字符串中字符的分布情况,哈希表这里用数组即可实现。 C版本: class Solution { public:int maxDifference(string s) {int a[26]…...
生成xcframework
打包 XCFramework 的方法 XCFramework 是苹果推出的一种多平台二进制分发格式,可以包含多个架构和平台的代码。打包 XCFramework 通常用于分发库或框架。 使用 Xcode 命令行工具打包 通过 xcodebuild 命令可以打包 XCFramework。确保项目已经配置好需要支持的平台…...
多模态2025:技术路线“神仙打架”,视频生成冲上云霄
文|魏琳华 编|王一粟 一场大会,聚集了中国多模态大模型的“半壁江山”。 智源大会2025为期两天的论坛中,汇集了学界、创业公司和大厂等三方的热门选手,关于多模态的集中讨论达到了前所未有的热度。其中,…...
C++初阶-list的底层
目录 1.std::list实现的所有代码 2.list的简单介绍 2.1实现list的类 2.2_list_iterator的实现 2.2.1_list_iterator实现的原因和好处 2.2.2_list_iterator实现 2.3_list_node的实现 2.3.1. 避免递归的模板依赖 2.3.2. 内存布局一致性 2.3.3. 类型安全的替代方案 2.3.…...
51c自动驾驶~合集58
我自己的原文哦~ https://blog.51cto.com/whaosoft/13967107 #CCA-Attention 全局池化局部保留,CCA-Attention为LLM长文本建模带来突破性进展 琶洲实验室、华南理工大学联合推出关键上下文感知注意力机制(CCA-Attention),…...
均衡后的SNRSINR
本文主要摘自参考文献中的前两篇,相关文献中经常会出现MIMO检测后的SINR不过一直没有找到相关数学推到过程,其中文献[1]中给出了相关原理在此仅做记录。 1. 系统模型 复信道模型 n t n_t nt 根发送天线, n r n_r nr 根接收天线的 MIMO 系…...
佰力博科技与您探讨热释电测量的几种方法
热释电的测量主要涉及热释电系数的测定,这是表征热释电材料性能的重要参数。热释电系数的测量方法主要包括静态法、动态法和积分电荷法。其中,积分电荷法最为常用,其原理是通过测量在电容器上积累的热释电电荷,从而确定热释电系数…...
云原生安全实战:API网关Kong的鉴权与限流详解
🔥「炎码工坊」技术弹药已装填! 点击关注 → 解锁工业级干货【工具实测|项目避坑|源码燃烧指南】 一、基础概念 1. API网关(API Gateway) API网关是微服务架构中的核心组件,负责统一管理所有API的流量入口。它像一座…...
计算机基础知识解析:从应用到架构的全面拆解
目录 前言 1、 计算机的应用领域:无处不在的数字助手 2、 计算机的进化史:从算盘到量子计算 3、计算机的分类:不止 “台式机和笔记本” 4、计算机的组件:硬件与软件的协同 4.1 硬件:五大核心部件 4.2 软件&#…...
FFmpeg:Windows系统小白安装及其使用
一、安装 1.访问官网 Download FFmpeg 2.点击版本目录 3.选择版本点击安装 注意这里选择的是【release buids】,注意左上角标题 例如我安装在目录 F:\FFmpeg 4.解压 5.添加环境变量 把你解压后的bin目录(即exe所在文件夹)加入系统变量…...
