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

从零开始搭建vite开发环境

news 2026/3/28 3:01:56

准备

nodejs 18
pnpm
https://vitejs.cn/

开始

pnpm init
pnpm add -D vite

在这里插入图片描述
在这里插入图片描述
新建index.html

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>从零开始搭建vite环境</title>
</head>
<body><h1>Hello World</h1>
</body>
</html>

修改package.json

{"name": "vitestu01","version": "1.0.0","description": "","main": "index.html","scripts": {"dev": "vite","build": "vite build"},"keywords": [],"author": "","license": "ISC","devDependencies": {"vite": "^5.3.3"}
}

输入pnpm run dev
在这里插入图片描述

新建src目录

src目录下新建main.js，安装jquery插件

pnpm add jquery

修改index.html

<script type="module" src="/src/main.js"></script>

修改package.json，增加type

"type": "module",

在这里插入图片描述
如果直接访问js则会报错
在这里插入图片描述

安装scss

pnpm add -D sass

src下新建scss文件夹，该文件夹下新建index.scss

$font-color:#f00;body{h1{color: $font-color;}
}

修改main.js

import $ from 'jquery';
import '@/scss/index.scss';$(function (){console.log("初始化成功");
})

新增vite.config.js

import $ from 'jquery';
import '@/scss/index.scss';$(function (){console.log("初始化成功");
})

在这里插入图片描述
如果想定义全局变量，可以在scss下新建global.scss

$bg-color:#0f0;

修改index.scss

$font-color:#f00;body{h1{color: $font-color;background: $bg-color;}
}

修改vite.config.js

import { defineConfig } from 'vite'
// path报错安装 @types/node
import path from 'path'// https://vitejs.dev/config/
export default defineConfig({plugins: [],resolve: {alias: {'@': path.resolve('./src'),},},// scss全局变量的配置css: {preprocessorOptions: {scss: {javascriptEnabled: true,additionalData: '@import "@/scss/global.scss";'}}}
})

重新启动编译即可
在这里插入图片描述

打包

pnpm run build

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
jquery和自己写的代码都一块打包了，html中单独引入jQuery cdn链接即可

import { defineConfig } from 'vite'
// path报错安装 @types/node
import path from 'path'// https://vitejs.dev/config/
export default defineConfig({plugins: [],resolve: {alias: {'@': path.resolve('./src'),},},// scss全局变量的配置css: {preprocessorOptions: {scss: {javascriptEnabled: true,additionalData: '@import "@/scss/global.scss";'}}},build:{rollupOptions:{external: ['jquery'],output: {globals: {jquery: 'jQuery',},},}}
})

在这里插入图片描述
然后打包即可
在这里插入图片描述

相关文章：

从零开始搭建vite开发环境

准备 nodejs 18 pnpm https://vitejs.cn/ 开始 pnpm init pnpm add -D vite新建index.html <!DOCTYPE html> <html lang"zh"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width…...

编程日记 2024/7/9 21:53:48

FastAPI本身是一个高性能的Web框架

FastAPI本身是一个高性能的Web框架&#xff0c;它并不直接支持数据库操作&#xff0c;但可以通过集成各种数据库库来与各种数据库进行交互。FastAPI支持几乎所有的关系型数据库和非关系型数据库&#xff0c;这主要取决于你选择的数据库库&#xff08;如ORM库&#xff09;以及相…...

编程日记 2024/7/9 21:52:42

yolov7:训练自己的数据集和测试

1、源代码&#xff1a;DataXujing/YOLOv7: :fire::fire::fire: Official YOLOv7训练自己的数据集并实现端到端的TensorRT模型加速推断 (github.com)2、参考的文献&#xff1a;⭐YOLOv7训练自己的数据集&#xff08;全网最详细 亲测有效&#xff09;⭐_python_Sunny&Meng-开…...

编程日记 2024/7/9 21:51:41

Redis 集群模式

文章目录 前言1. Redis Cluster 搭建1.1 准备节点1.2 准备配置文件1.3 查看集群状态 2. 客户端访问3. Python 连接集群4. Redis 集群维护4.1 新增节点4.2 手动分配 slot4.3 节点移除 5. 集群运维5.1 集群倾斜5.2 手动切换 前言 Redis 3.0 提供了 Redis Cluster 架构&#xff0…...

编程日记 2024/7/9 21:50:40

如何快速实现一个无缝轮播效果

&#x1f9d1;‍&#x1f4bb; 写在开头 点赞 收藏 学会&#x1f923;&#x1f923;&#x1f923; 需求简介 轮播图是我们前端开发中的一个常见需求&#xff0c;在项目开发中&#xff0c;我们可以使用element、ant等UI库实现。某些场景&#xff0c;为了一个简单的功能安装一…...

编程日记 2024/7/9 21:49:40

kubernetes集群证书过期问题解决

kubernetes集群证书过期问题解决 问题描述检查证书是否过期更新证书master节点操作node节点操作 问题描述 K8S 各个组件需要与 api-server 进行通信&#xff0c;通信使用的证书都存放在 /etc/kubernetes/pki 路径下&#xff0c;kubeadm 生成的证书大部分默认有效期为 1 年&…...

编程日记 2024/7/9 21:48:38

PHP框架详解-symfony框架

Symfony是一个使用PHP语言编写的开源Web应用框架&#xff0c;旨在加快开发进程&#xff0c;替代重复编码工作&#xff0c;并帮助构建可维护和可扩展的应用程序。以下是对Symfony框架的详细解析&#xff1a; 一、框架概述 Symfony提供了一组可重用的组件和一个标准化、可扩展的…...

编程日记 2024/7/9 21:47:37

Linux--线程的控制

目录 0.前言 1.pthread库 2.关于控制线程的接口 2.1.创建线程&#xff08;pthread_create&#xff09; 2.2.线程等待&#xff08;pthread_join&#xff09; 代码示例1&#xff1a; ​编辑 ***一些问题*** 2. 3.创建多线程 3.线程的终止 &#xff08;pthread_exit /…...

编程日记 2024/7/9 21:46:36

大数据------JavaWeb------会话跟踪技术（Cookie、Session）（完整知识点汇总）

会话跟踪技术&#xff08;Cookie&Session&#xff09; 注意&#xff1a; HTTP协议是无状态 的&#xff0c;即每次浏览器向服务器请求时&#xff0c;服务器都会将该请求视为新的请求&#xff0c;因此我们需要会话跟踪技术来实现会话内的数据共享 会话 当用户打开浏览器&am…...

编程日记 2024/7/9 21:44:33

crossJoin笛卡尔积

crossJoin笛卡尔积 在Spark中&#xff0c;crossJoin方法用于执行两个数据集之间的笛卡尔积操作。具体来说&#xff0c;如果有两个数据集&#xff08;DataFrame或Dataset&#xff09;&#xff0c;调用crossJoin方法将会生成一个新的数据集&#xff0c;其中包含两个原始数据集中所…...

编程日记 2024/7/9 21:43:32

Java客户端调用SOAP方式的WebService服务实现方式分析

简介 在多系统交互中&#xff0c;有时候需要以Java作为客户端来调用SOAP方式的WebService服务&#xff0c;本文通过分析不同的调用方式&#xff0c;以Demo的形式&#xff0c;帮助读者在生产实践中选择合适的调用方式。 本文JDK环境为JDK17。 结论 推荐使用Axis2或者Jaxws&#…...

编程日记 2024/7/9 21:41:29

华为机试真题--字符串序列判定

题目描述： 输入两个字符串S和L，都只包含英文小写字母，其中S长度<=100，L长度<=500000，请判定S是否是L的有效字串。 判定规则： S中的每个字符在L中都能找到（可以不连续），且S在Ｌ中字符的前后顺序与S中顺序要保持一致。（例如，S="ace"是L="abcd…...

编程日记 2024/7/9 21:38:27

Linux内核 -- 虚拟化之virtqueue结构

Linux Kernel中的Virtqueue Virtqueue是Linux Kernel中用于实现Virtio设备的一个关键数据结构。Virtio是一种虚拟I/O设备标准&#xff0c;旨在简化虚拟化环境中虚拟设备与虚拟机之间的通信。Virtqueue则是实现这种通信的核心机制。以下是Virtqueue的一些关键点&#xff1a; V…...

编程日记 2024/7/9 21:37:26

【pytorch18】Logistic Regression

回忆线性回归 for continuous:y xwbfor probability output:yσ(xwb) σ:sigmoid or logistic 线性回归是简单的线性模型&#xff0c;输入是x&#xff0c;网络参数是w和b&#xff0c;输出是连续的y的值 如何把它转化为分类问题?加了sigmoid函数&#xff0c;输出的值不再是…...

编程日记 2024/7/9 21:36:25

PostgreSQL的使用

PostgreSQL的使用 1.首先&#xff0c;使用docker进行安装pgvector数据库&#xff0c;具体的安装步骤可以查看我之前发的博文。 2.docker exec -it pgvector /bin/bash 进入docker容器内部&#xff0c;操作数据库&#xff0c;上述命令是以交互式命令进入了容器的内部&#xf…...

编程日记 2024/7/9 21:35:23

python 高级技巧 0706

python 33个高级用法技巧 列表推导式 简化了基于现有列表创建新列表的过程。 squares [x**2 for x in range(10)] print(squares)[0, 1, 4, 9, 16, 25, 36, 49, 64, 81]字典推导式 用简洁的方式创建字典。 square_dict {x: x**2 for x in range(10)} print(square_dict){0…...

编程日记 2024/7/9 21:33:21

面试经典 106. 从中序与后序遍历序列构造二叉树

最近小胖开始找工作了&#xff0c;又来刷苦逼的算法了 555 废话不多说&#xff0c;看这一题&#xff0c;上链接&#xff1a;https://leetcode.cn/problems/construct-binary-tree-from-inorder-and-postorder-traversal/description/?envTypestudy-plan-v2&envIdtop-inte…...

编程日记 2024/7/9 21:31:18

如何解决群晖Docker注册表查询失败/无法拉取镜像等问题

文章目录 📖 介绍 📖🏡 演示环境 🏡📒 问题概述 📒📒 解决方案 📒🔖 方法一🔖 方法二🔖 方法三⚓️ 相关链接 🚓️📖 介绍 📖 在群晖（Synology）NAS设备上使用Docker时，我们可能会遇到查询Docker注册表失败，无法拉取Docker镜像的问题。这种情况…...

编程日记 2024/7/9 21:30:17

【Scrapy】 深入了解 Scrapy 中间件中的 process_spider_input 方法

准我快乐地重饰演某段美丽故事主人 饰演你旧年共寻梦的恋人 再去做没流着情泪的伊人 假装再有从前演过的戏份 重饰演某段美丽故事主人 饰演你旧年共寻梦的恋人 你纵是未明白仍夜深一人 穿起你那无言毛衣当跟你接近 &#x1f3b5; 陈慧娴《傻女》 Scrapy 是…...

编程日记 2024/7/9 21:29:16

数据库MySQL---基础篇

存储和管理数据的仓库 MySQL概述 数据库相关概念 数据库&#xff08;DataBase&#xff09;---数据存储的仓库&#xff0c;数据是有组织的进行存储 数据库管理系统&#xff08;DBMS&#xff09;-----操纵和管理数据库的大型软件 SQL----操作关系型数据库的编程语言&#xff…...

编程日记 2024/7/9 21:27:13

冒险岛V128单机版服务端魔改指南：从基础搭建到自定义任务/装备修改

冒险岛V128单机版深度定制指南&#xff1a;从零构建个性化游戏世界 在数字娱乐的黄金时代&#xff0c;怀旧游戏焕发新生已成为一种文化现象。作为横版卷轴网游的经典之作&#xff0c;冒险岛凭借其独特的艺术风格和社交属性&#xff0c;至今仍拥有大量忠实玩家。而单机版的出现&…...

编程新知 2026/3/28 2:59:12

3个步骤掌握阿里云盘命令行客户端的快传链接：大文件分享的终极解决方案

3个步骤掌握阿里云盘命令行客户端的快传链接&#xff1a;大文件分享的终极解决方案 【免费下载链接】aliyunpan 阿里云盘命令行客户端&#xff0c;支持JavaScript插件&#xff0c;支持同步备份功能。 项目地址: https://gitcode.com/GitHub_Trending/ali/aliyunpan 在当…...

编程新知 2026/3/28 2:18:51

小型电动助力播种机【设计说明书+CAD图纸+solidworks三维+STEP+IGS】

小型电动助力播种机是针对传统播种作业效率低、劳动强度大的问题设计的农业机械装置&#xff0c;其核心作用在于通过电动助力系统优化播种流程&#xff0c;实现均匀播种与精准控制。该装置采用模块化设计理念&#xff0c;将动力传输、播种控制与行走机构集成于一体&#xff0c;…...

编程新知 2026/3/28 0:57:34

DXVK性能优化：让老旧系统重获新生的完美方案

DXVK性能优化&#xff1a;让老旧系统重获新生的完美方案 【免费下载链接】dxvk Vulkan-based implementation of D3D9, D3D10 and D3D11 for Linux / Wine 项目地址: https://gitcode.com/gh_mirrors/dx/dxvk 为什么老旧电脑运行新程序总是卡顿&#xff1f;DXVK如何解决…...

编程新知 2026/3/28 0:51:33

3D场景重建与实时渲染：XV3DGS-UEPlugin技术指南

3D场景重建与实时渲染&#xff1a;XV3DGS-UEPlugin技术指南 【免费下载链接】XScene-UEPlugin 项目地址: https://gitcode.com/gh_mirrors/xv/XScene-UEPlugin XV3DGS-UEPlugin是由XVERSE Technology Inc.开发的基于Unreal Engine 5的混合编辑插件&#xff0c;提供Gaus…...

编程新知 2026/3/27 23:30:40

Unity引擎开发过的VR大场景项目有哪些？用到的网络技术，资源处理及热更新方案有哪些

我梳理了Unity引擎开发的VR大场景代表性项目&#xff0c;并从网络技术、资源处理、热更新方案三个核心技术维度进行了详细分析。一、代表性VR大场景项目 1. 基于VR的数字孪生智慧城市平台 开发方&#xff1a;香港理工大学温州技术创新研究院技术特点&#xff1a;整合GIS地理信息…...

编程新知 2026/3/27 22:06:04

告别手打公式！用SimpleTex截图转LaTeX+Axmath微调+Typora排版的保姆级教程

数学公式高效处理全流程&#xff1a;从截图识别到专业排版 每次在论文或笔记中插入复杂的数学公式时&#xff0c;你是否也经历过这样的痛苦&#xff1f;反复核对LaTeX代码中的每个括号&#xff0c;调整上下标位置&#xff0c;或是为了一个特殊符号翻遍文档。传统的手动输入方式…...

编程新知 2026/3/27 21:39:57

Deformable-DETR环境配置避坑：如何正确设置CUDA_HOME解决ms_deformable_im2col_cuda报错

Deformable-DETR环境配置实战&#xff1a;从CUDA路径排查到高效编译 当你第一次尝试运行Deformable-DETR这个强大的目标检测框架时&#xff0c;是否也遇到了那个令人头疼的报错&#xff1a;"error in ms_deformable_im2col_cuda: no kernel image is available for execut…...

编程新知 2026/3/27 21:25:49

s2-pro效果惊艳展示：情感化语音合成——喜悦、平静、关切语调

s2-pro效果惊艳展示&#xff1a;情感化语音合成——喜悦、平静、关切语调 1. 专业级语音合成新标杆 s2-pro作为Fish Audio开源的专业级语音合成模型镜像&#xff0c;正在重新定义文本转语音的技术边界。不同于传统单调的语音合成&#xff0c;这款工具能够精准捕捉并复现人类语…...

编程新知 2026/3/27 20:35:37

AIGlasses_for_navigation免配置环境：预置ffmpeg+opencv+torchvision全栈

AIGlasses_for_navigation免配置环境&#xff1a;预置ffmpegopencvtorchvision全栈 1. 引言&#xff1a;让AI视觉开发变得简单 如果你曾经尝试过搭建一个完整的AI视觉处理环境&#xff0c;一定知道那是个多么痛苦的过程&#xff1a;安装CUDA、配置ffmpeg、编译OpenCV、处理各…...

编程新知 2026/3/27 19:49:03