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 研究背景 在当今信息爆炸的时代，气象数据作为重要的环境信息资源，扮演着关键的角色。然而，传统的气象数据呈现方式存在信息量庞大、难以理解的问题，限制了用户对气象信息的深入理解和利用。因此，基…...
树莓派超全系列教程文档--(61)树莓派摄像头高级使用方法
树莓派摄像头高级使用方法 配置通过调谐文件来调整相机行为 使用多个摄像头安装 libcam 和 rpicam-apps依赖关系开发包 文章来源： http://raspberry.dns8844.cn/documentation 原文网址 配置 大多数用例自动工作，无需更改相机配置。但是，一…...
突破不可导策略的训练难题：零阶优化与强化学习的深度嵌合
强化学习（Reinforcement Learning, RL）是工业领域智能控制的重要方法。它的基本原理是将最优控制问题建模为马尔可夫决策过程，然后使用强化学习的Actor-Critic机制（中文译作“知行互动”机制），逐步迭代求解…...
Swift 协议扩展精进之路：解决 CoreData 托管实体子类的类型不匹配问题（下）
概述 在 Swift 开发语言中，各位秃头小码农们可以充分利用语法本身所带来的便利去劈荆斩棘。我们还可以恣意利用泛型、协议关联类型和协议扩展来进一步简化和优化我们复杂的代码需求。 不过，在涉及到多个子类派生于基类进行多态模拟的场景下，…...
【服务器压力测试】本地PC电脑作为服务器运行时出现卡顿和资源紧张（Windows/Linux）
要让本地PC电脑作为服务器运行时出现卡顿和资源紧张的情况，可以通过以下几种方式模拟或触发： 1. 增加CPU负载 运行大量计算密集型任务，例如： 使用多线程循环执行复杂计算（如数学运算、加密解密等）。运行图…...
LLM基础1_语言模型如何处理文本
基于GitHub项目：https://github.com/datawhalechina/llms-from-scratch-cn 工具介绍 tiktoken：OpenAI开发的专业"分词器" torch：Facebook开发的强力计算引擎，相当于超级计算器 理解词嵌入：给词语画"…...
CMake 从 GitHub 下载第三方库并使用
有时我们希望直接使用 GitHub 上的开源库，而不想手动下载、编译和安装。 可以利用 CMake 提供的 FetchContent 模块来实现自动下载、构建和链接第三方库。 FetchContent 命令官方文档✅ 示例代码 我们将以 fmt 这个流行的格式化库为例，演示如何： 使用 FetchContent 从 GitH…...
3403. 从盒子中找出字典序最大的字符串 I
3403. 从盒子中找出字典序最大的字符串 I 题目链接：3403. 从盒子中找出字典序最大的字符串 I 代码如下： class Solution { public:string answerString(string word, int numFriends) {if (numFriends 1) {return word;}string res;for (int i 0;i &…...
UR 协作机器人「三剑客」：精密轻量担当（UR7e）、全能协作主力（UR12e）、重型任务专家（UR15）
UR协作机器人正以其卓越性能在现代制造业自动化中扮演重要角色。UR7e、UR12e和UR15通过创新技术和精准设计满足了不同行业的多样化需求。其中，UR15以其速度、精度及人工智能准备能力成为自动化领域的重要突破。UR7e和UR12e则在负载规格和市场定位上不断优化…...
SiFli 52把Imagie图片，Font字体资源放在指定位置，编译成指定img.bin和font.bin的问题
分区配置 (ptab.json) img 属性介绍： img 属性指定分区存放的 image 名称，指定的 image 名称必须是当前工程生成的 binary 。 如果 binary 有多个文件，则以 proj_name:binary_name 格式指定文件名， proj_name 为工程 名&…...
接口自动化测试：HttpRunner基础
相关文档 HttpRunner V3.x中文文档 HttpRunner 用户指南 使用HttpRunner 3.x实现接口自动化测试 HttpRunner介绍 HttpRunner 是一个开源的 API 测试工具，支持 HTTP(S)/HTTP2/WebSocket/RPC 等网络协议，涵盖接口测试、性能测试、数字体验监测等测试类型…...