当前位置: 首页 > news >正文

新手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.打包准备 说明&#xff1a;不需要在src下面创建&#xff0c;在vite-Demo文件夹创建 4.1index.js文件 document.body.insertAdjacentHTML("beforeend","<h1>…...

SpringMVC框架——First Day

目录 三层架构 MVC模型 SpringMVC 快速入门案例 SpringMVC的概述&#xff08;了解&#xff09; SpringMVC在三层架构的位置 SpringMVC的优势&#xff08;了解&#xff09; 创建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 自动生成的代码&#xff0c;sql日志怎么没有打印 在ruoyi-admin中的application.yml配置如下。 # 日志配置&#xff0c;默认 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&#xff0c;以下是相关资讯&#xff1a; 一、漏洞详情 OpenSSH是一个用于安全远程登录和文件传输的开源软件套件。它提供了一系列的客户端和服务器程序&#xff0c;包括 ssh、scp、sftp等&#xff0c;用于在网络上进行…...

【知网检索】2023年金融,贸易和商业管理国际学术会议(FTBM2023)

随着经济全球化&#xff0c;贸易自由化的进程加快&#xff0c;我国经济对外开放程度不断加深&#xff0c;正在加快融入世界经济一体化当中。当今世界各国竞争过程中&#xff0c;金融、贸易以及商业形态已成为其关键与焦点竞争内容。 2023年金融、贸易和商业管理国际学术会议(F…...

数据可视化:Matplotlib详解及实战

1 Matplotlib介绍 Matplotlib是Python中最常用的可视化工具之一,可以非常方便地创建海量类型的2D图表和一些基本的3D图表。 Matplotlib提供了一个套面向绘图对象编程的API接口&#xff0c;能够很轻松地实现各种图像的绘制&#xff0c;并且它可以配合Python GUI工具&#xff08;…...

Flutter flutter_boost 集成

刚开始接触使用flutter boost路由的心得体会记录如下&#xff1a; Fltter项目部分&#xff1a; 第一步 在Flutter项目的 pubspec.yaml文件中添加如下信息&#xff1a; flutter_boost:git:url: https://github.com/alibaba/flutter_boost.gitref: 4.3.0之后在flutter工程下运…...

Stable Diffusion中人物生成相关的negative prompts

下面是常用的negative prompt&#xff0c;在使用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 是一个单行输入文本框&#xff0c;为用户提供了比较多的编辑功能&#xff0c;例如选择复制、粘贴。 修改echomode属性为password Push Button(常规按钮) 三、程序 声明全局变量&#xff0c;属于MainWindow private: // 定义了一个指向Ma…...

python中几个有趣的函数和推导式

前言 嗨喽~大家好呀&#xff0c;这里是魔王呐 ❤ ~! 一、range()函数 1、range()通常用来做循环。 2、range()生成器的特性。 例子&#xff1a;假如range&#xff08;&#xff09;中使用的数值特别大&#xff0c;为100000000000000000000000000000&#xff1f; python解释…...

【Jenkins】Jenkins 安装

Jenkins 安装 文章目录 Jenkins 安装一、安装JDK二、安装jenkins三、访问 Jenkins 初始化页面 Jenkins官网地址&#xff1a;https://www.jenkins.io/zh/download/ JDK下载地址&#xff1a;https://www.oracle.com/java/technologies/downloads/ 清华源下载RPM包地址&#xff…...

LNMP搭建以及Discuz论坛部署

目录 LNMP 编译安装 LNMP搭建 Nginx 服务 MySQL 服务 PHP 解析环境 部署 Discuz社区论坛 LNMP 目前成熟的企业网站的应用模式之一&#xff0c;指的是一套协同工作的系统和相关软件&#xff0c;能提供静态页面服务和动态web服务 L linux系统 N nginx网站服务&#xff0…...

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后&#xff0c;进入到交互模式&#xff0c;通过以下命令完成对程序的调试&#xff1b;注意高频使用的命令一般都会有缩写&#xff0c;熟练使用这些缩写命令能提高调试的效率&#xff1b;…...

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个关键指标

随着数字化时代的到来&#xff0c;私域流量运营已经成为企业营销的重要策略。然而&#xff0c;要确保私域流量运营的有效性和成功&#xff0c;数据分析是至关重要的一环。通过对运营数据进行深入分析&#xff0c;企业可以了解用户行为和趋势&#xff0c;发现问题和机遇&#xf…...

通过Wrangler CLI在worker中创建数据库和表

官方使用文档&#xff1a;Getting started Cloudflare D1 docs 创建数据库 在命令行中执行完成之后&#xff0c;会在本地和远程创建数据库&#xff1a; npx wranglerlatest d1 create prod-d1-tutorial 在cf中就可以看到数据库&#xff1a; 现在&#xff0c;您的Cloudfla…...

在rocky linux 9.5上在线安装 docker

前面是指南&#xff0c;后面是日志 sudo dnf config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo sudo dnf install docker-ce docker-ce-cli containerd.io -y docker version sudo systemctl start docker sudo systemctl status docker …...

服务器硬防的应用场景都有哪些?

服务器硬防是指一种通过硬件设备层面的安全措施来防御服务器系统受到网络攻击的方式&#xff0c;避免服务器受到各种恶意攻击和网络威胁&#xff0c;那么&#xff0c;服务器硬防通常都会应用在哪些场景当中呢&#xff1f; 硬防服务器中一般会配备入侵检测系统和预防系统&#x…...

Robots.txt 文件

什么是robots.txt&#xff1f; robots.txt 是一个位于网站根目录下的文本文件&#xff08;如&#xff1a;https://example.com/robots.txt&#xff09;&#xff0c;它用于指导网络爬虫&#xff08;如搜索引擎的蜘蛛程序&#xff09;如何抓取该网站的内容。这个文件遵循 Robots…...

LLM基础1_语言模型如何处理文本

基于GitHub项目&#xff1a;https://github.com/datawhalechina/llms-from-scratch-cn 工具介绍 tiktoken&#xff1a;OpenAI开发的专业"分词器" torch&#xff1a;Facebook开发的强力计算引擎&#xff0c;相当于超级计算器 理解词嵌入&#xff1a;给词语画"…...

select、poll、epoll 与 Reactor 模式

在高并发网络编程领域&#xff0c;高效处理大量连接和 I/O 事件是系统性能的关键。select、poll、epoll 作为 I/O 多路复用技术的代表&#xff0c;以及基于它们实现的 Reactor 模式&#xff0c;为开发者提供了强大的工具。本文将深入探讨这些技术的底层原理、优缺点。​ 一、I…...

OPenCV CUDA模块图像处理-----对图像执行 均值漂移滤波(Mean Shift Filtering)函数meanShiftFiltering()

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 在 GPU 上对图像执行 均值漂移滤波&#xff08;Mean Shift Filtering&#xff09;&#xff0c;用于图像分割或平滑处理。 该函数将输入图像中的…...

AirSim/Cosys-AirSim 游戏开发(四)外部固定位置监控相机

这个博客介绍了如何通过 settings.json 文件添加一个无人机外的 固定位置监控相机&#xff0c;因为在使用过程中发现 Airsim 对外部监控相机的描述模糊&#xff0c;而 Cosys-Airsim 在官方文档中没有提供外部监控相机设置&#xff0c;最后在源码示例中找到了&#xff0c;所以感…...

怎么让Comfyui导出的图像不包含工作流信息,

为了数据安全&#xff0c;让Comfyui导出的图像不包含工作流信息&#xff0c;导出的图像就不会拖到comfyui中加载出来工作流。 ComfyUI的目录下node.py 直接移除 pnginfo&#xff08;推荐&#xff09;​​ 在 save_images 方法中&#xff0c;​​删除或注释掉所有与 metadata …...

基于单片机的宠物屋智能系统设计与实现(论文+源码)

本设计基于单片机的宠物屋智能系统核心是实现对宠物生活环境及状态的智能管理。系统以单片机为中枢&#xff0c;连接红外测温传感器&#xff0c;可实时精准捕捉宠物体温变化&#xff0c;以便及时发现健康异常&#xff1b;水位检测传感器时刻监测饮用水余量&#xff0c;防止宠物…...