vite环境下使用bootstrap
环境
nodejs 18
pnpm
初始化
pnpm init
pnpm add -D vite --registry http://registry.npm.taobao.org
pnpm add bootstrap @popperjs/core --registry http://registry.npm.taobao.org
pnpm add -D sass --registry http://registry.npm.taobao.org
新建vite.config.js
const path = require('path')export default {root: path.resolve(__dirname, 'src'),server: {port: 8080,hot: true}
}
src下新建index.html
<!doctype html>
<html lang="zh">
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Bootstrap Vite</title>
</head>
<body>
<div class="container py-4 px-3 mx-auto"><h1>Hello, Bootstrap and Vite!</h1><button class="btn btn-primary">Primary button</button>
</div>
<script type="module" src="./js/main.js"></script>
</body>
</html>
修改package.json
"scripts": {"start": "vite"},
运行
pnpm start
引入bootstrap
修改vite.config.js
const path = require('path')export default {root: path.resolve(__dirname, 'src'),resolve: {alias: {'~bootstrap': path.resolve(__dirname, 'node_modules/bootstrap'),}},server: {port: 8080,hot: true}
}
新建 src/scss/styles.scss
@import "~bootstrap/scss/bootstrap";
新建src/js/main.js
// Import our custom CSS
import '../scss/styles.scss'// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
//单个引入
//import {Button} from 'bootstrap'
打包
修改package.json
"scripts": {"start": "vite","build": "vite build"},
执行pnpm build
dist相对于index.html，默认会在src目录下和index.html同级
如果想打包到src目录外可以设置相对路径
const path = require('path')export default {root: path.resolve(__dirname, 'src'),resolve: {alias: {'~bootstrap': path.resolve(__dirname, 'node_modules/bootstrap'),}},server: {port: 8080,hot: true},build:{outDir:'../dist'}
}
相关文章：
vite环境下使用bootstrap
环境 nodejs 18 pnpm 初始化 pnpm init pnpm add -D vite --registry http://registry.npm.taobao.org pnpm add bootstrap popperjs/core --registry http://registry.npm.taobao.org pnpm add -D sass --registry http://registry.npm.taobao.org新建vite.config.js cons…...
Laravel视图渲染封装
第一种 app/Helpers/ViewHelper.php 创建一个辅助函数，用于动态确定视图路径： <?php if (!function_exists(fetchView)) {function fetchView($data []){$currentAction \Route::currentRouteAction();list($controller, $method) explode(, $c…...
C++学习补充2：MySQL select 查询
MySQL select 查询 MySQL 查询 select时， 不区分大小写的。 MySQL 在默认情况下是区分大小写的，但是它的行为可能因配置和使用的字符集而有所不同。以下是一些可能导致查询在 SELECT 语句中不区分大小写的原因： 字符集设置：如果…...
uni-app声生命周期
应用的生命周期函数在App.vue页面 onLaunch:当uni-app初始化完成时触发（全局触发一次） onShow:当uni-app启动，或从后台进入前台时显示 onHide:当uni-app从前台进入后台 onError:当uni-app报错时触发,异常信息为err 页面的生命周期 onLoad…...
排序算法--堆排序
基本思想 堆排序的基本思想是，将待排序的元素构建成一个最大堆或最小堆。对于最大堆来说，堆顶是整个堆中的最大元素；对于最小堆来说，堆顶是整个堆中的最小元素。然后，将堆顶元素与堆中最后一个元素交换，并…...
iPhone 在 App Store 中推出的 PC 模拟器 UTM SE
PC 模拟器是什么？PC 模拟器是一种软件工具，它模拟不同硬件或操作系统环境，使得用户可以在一台 PC 上运行其他平台的应用程序或操作系统。通过 PC 模拟器，用户可以在 Windows 电脑上体验 Android 应用、在 Mac 电脑上运行 Windows …...
FastAPI删除mongodb重复数据（数据清洗）
在 FastAPI 中删除 MongoDB 重复数据，你需要结合使用 MongoDB 查询和 FastAPI 的路由功能。以下是一个通用的例子，演示如何删除特定字段上的重复数据： 1. 定义数据模型: from pydantic import BaseModel, Field from bson import ObjectId …...
移动UI：排行榜单页面如何设计，从这五点入手，附示例。
移动UI的排行榜单页面设计需要考虑以下几个方面： 1. 页面布局： 排行榜单页面的布局应该清晰明了，可以采用列表的形式展示排行榜内容，同时考虑到移动设备的屏幕大小，应该设计合理的滚动和分页机制，确保用户…...
如何解决 uni-app 项目中 “文件查找失败：‘crypto-js‘“ 的问题
在开发使用 uni-app 框架的项目时，遇到依赖问题是常见的。本文将介绍如何解决编译过程中出现的 “文件查找失败：‘crypto-js’” 错误，并说明这种错误为什么会发生以及如何避免。 问题背景 在对 uni-app 项目进行编译时，我们可能…...
Apache DolphinScheduler 3.2.2 版本正式发布！
Apache DolphinScheduler 3.2.2 版本正式发布！ 近日，Apache DolphinScheduler 发布了 3.2.2 版本。此版本主要基于 3.2.1 版本进行了 bug 修复，新增若干特性，并进行了众多改进和 Bug 修复，以及文档修复等。 …...
汇川CodeSysPLC教程03-2-6 ModBus TCP
什么是ModBus TCP？ ModBus TCP是一种基于TCP/IP协议的工业网络通信协议，常用于工业自动化和控制系统。它是ModBus协议的一个变种，ModBus协议最初由Modicon（现在是施耐德电气的一部分）在1979年开发。 以下是ModBus TC…...
【Python机器学习】决策树的构造——划分数据集
分类算法除了需要测量信息熵，还需要划分数据集，度量划分数据集的熵，以便判断当前是否正确划分了数据集。 我们将对每个特征划分数据集的结果计算一次信息熵，然后判断按照哪个特征划分数据集是最好的划分方式。 想象一个分部在二…...
Pip换源使用帮助
PyPI 镜像使用帮助 PyPI 镜像帮助提高包安装的速度，特别是当默认源访问较慢时。镜像每次同步成功后，每隔 5 分钟进行更新，确保镜像内容尽量与官方源保持一致。 pip 临时使用 如果您只想在一次安装中使用镜像，可以使用以下命令&…...
力扣1089复写0
1089. 复写零 - 力扣（LeetCode） 我们的思路是利用类似双指针的方式去解答，来看下代码 class Solution { public:void duplicateZeros(vector<int>& arr){int cur 0, dest -1, n arr.size();while (cur < n){if (arr[cur])d…...
10 VUE Element
文章目录 VUE1、概述2、快速入门3、Vue 指令4、生命周期5、案例 Elemant1、快速入门2、Element 布局3、常用组件-案例 VUE 1、概述 Vue 是一套前端框架，免除原生JavaScript中的DOM操作，简化书写基于MVVM(Model-View-ViewModel)思想，实现数据…...
独立游戏《星尘异变》UE5 C++程序开发日志8——实现敏感词过滤功能（AC自动机）
在游戏中经常会有需要玩家输入一些内容的功能，例如聊天，命名等，这款游戏只有在存档时辉用到命名功能，所以这个过滤也只是一个实验性的功能，我们将使用AC自动机来实现，这是在我们把“csdn”这个词设置为屏蔽…...
使用 Swagger 在 Golang 中进行 API 文档生成
Swagger 是一款强大的 API 文档生成工具，可以帮助开发者轻松创建、管理和展示 RESTful API 文档。在本文中，我们将介绍如何在 Golang 项目中使用 Swagger 来生成 API 文档。 官网地址 ： gin-swagger 前提条件 Golang 开发环境（…...
Pip换源实战指南：加速你的Python开发
1. Pip换源的重要性 在使用Python进行软件开发或数据分析时，pip 是Python的包管理工具，用于安装和管理第三方库。然而，由于网络环境的差异，特别是在某些国家，访问默认的PyPI（Python Package Indexÿ…...
【数据结构】常用数据结构的介绍：理解与应用
文章目录 前言一、介绍二、使用场景三、总结 前言 在计算机科学中，数据结构是我们组织和存储数据的方式，它可以帮助我们高效地执行各种操作，如搜索、插入和删除。从数组和链表，到树和图，不同的数据结构有着不同的优点…...
【优秀python系统毕设】基于Python flask的气象数据可视化系统设计与实现，有LSTM算法预测气温
第一章 绪论 1.1 研究背景 在当今信息爆炸的时代，气象数据作为重要的环境信息资源，扮演着关键的角色。然而，传统的气象数据呈现方式存在信息量庞大、难以理解的问题，限制了用户对气象信息的深入理解和利用。因此，基…...
为什么需要建设工程项目管理？工程项目管理有哪些亮点功能？
在建筑行业，项目管理的重要性不言而喻。随着工程规模的扩大、技术复杂度的提升，传统的管理模式已经难以满足现代工程的需求。过去，许多企业依赖手工记录、口头沟通和分散的信息管理，导致效率低下、成本失控、风险频发。例如&#…...
MMaDA: Multimodal Large Diffusion Language Models
CODE ： https://github.com/Gen-Verse/MMaDA Abstract 我们介绍了一种新型的多模态扩散基础模型MMaDA，它被设计用于在文本推理、多模态理解和文本到图像生成等不同领域实现卓越的性能。该方法的特点是三个关键创新:(i) MMaDA采用统一的扩散架构…...
江苏艾立泰跨国资源接力：废料变黄金的绿色供应链革命
在华东塑料包装行业面临限塑令深度调整的背景下，江苏艾立泰以一场跨国资源接力的创新实践，重新定义了绿色供应链的边界。 跨国回收网络：废料变黄金的全球棋局 艾立泰在欧洲、东南亚建立再生塑料回收点，将海外废弃包装箱通过标准…...
C# SqlSugar：依赖注入与仓储模式实践
C# SqlSugar：依赖注入与仓储模式实践 在 C# 的应用开发中，数据库操作是必不可少的环节。为了让数据访问层更加简洁、高效且易于维护，许多开发者会选择成熟的 ORM（对象关系映射）框架，SqlSugar 就是其中备受…...
精益数据分析（97/126）：邮件营销与用户参与度的关键指标优化指南
精益数据分析（97/126）：邮件营销与用户参与度的关键指标优化指南 在数字化营销时代，邮件列表效度、用户参与度和网站性能等指标往往决定着创业公司的增长成败。今天，我们将深入解析邮件打开率、网站可用性、页面参与时…...
企业如何增强终端安全？
在数字化转型加速的今天，企业的业务运行越来越依赖于终端设备。从员工的笔记本电脑、智能手机，到工厂里的物联网设备、智能传感器，这些终端构成了企业与外部世界连接的 “神经末梢”。然而，随着远程办公的常态化和设备接入的爆炸式…...
人工智能--安全大模型训练计划：基于Fine-tuning + LLM Agent
安全大模型训练计划：基于Fine-tuning LLM Agent 1. 构建高质量安全数据集 目标：为安全大模型创建高质量、去偏、符合伦理的训练数据集，涵盖安全相关任务（如有害内容检测、隐私保护、道德推理等）。 1.1 数据收集 描…...
用鸿蒙HarmonyOS5实现国际象棋小游戏的过程
下面是一个基于鸿蒙OS (HarmonyOS) 的国际象棋小游戏的完整实现代码，使用Java语言和鸿蒙的Ability框架。 1. 项目结构 /src/main/java/com/example/chess/├── MainAbilitySlice.java // 主界面逻辑├── ChessView.java // 游戏视图和逻辑├── …...
npm安装electron下载太慢，导致报错
npm安装electron下载太慢，导致报错 背景 想学习electron框架做个桌面应用，卡在了安装依赖（无语了）。。。一开始以为node版本或者npm版本太低问题，调整版本后还是报错。偶尔执行install命令后，可以开始下载…...
GC1808：高性能音频ADC的卓越之选
在音频处理领域，高质量的音频模数转换器（ADC）是实现精准音频数字化的关键。GC1808，一款96kHz、24bit立体声音频ADC，以其卓越的性能和高性价比脱颖而出，成为众多音频设备制造商的理想选择。 GC1808集成了64倍…...