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

bootstrapjs开发环境搭建

Bootstrapjs是一个web前端页面应用开发框架,其提供功能丰富的JavaScript工具集以及用户界面元素或组件的样式集,本文主要描述bootstrapjs的开发环境搭建。

图片

如上所示,使用nodejs运行时环境、使用npm包管理工具、使用npm初始化一个项目工程test2023

npm i --save-dev webpack webpack-cli  webpack-dev-server html-webpack-plugin

npm i --save bootstrap @popperjs/core

npm i --save-dev autoprefixer css-loader  postcss-loader sass sass-loader style-loader

图片

图片

如上所示,安装webpack项目工程构建工具、webpack-cli是命令行支持工具、webpack-dev-server是开发环境支持工具、html-webpack-plugin是项目工程目录构建工具、安装bootstrapjs工具集、安装bootstrapcss工具集(支持css或者sass)

webpack.config.js

图片

如上所示,设置webpack项目工程构建参数、webpack根据这些设置将源码编译输出到dist构建的目录中

src/index.html

图片

如上所示,创建项目工程的首页index.html,在单页面应用中,webpack在构建过程中将javascript、css增加到该页面中

package.json

图片

如上所示,设置npm构建打包运行项目工程的执行命令以及其他参数

图片

图片

如上所示,使用npm包管理工具运行项目工程test2023成功、在浏览器中访问项目工程test2023响应成功

图片

如上所示,使用npm包管理工具构建项目工程test2023成功,可使用dist构建的工程部署到运行时环境中

相关文章:

bootstrapjs开发环境搭建

Bootstrapjs是一个web前端页面应用开发框架,其提供功能丰富的JavaScript工具集以及用户界面元素或组件的样式集,本文主要描述bootstrapjs的开发环境搭建。 如上所示,使用nodejs运行时环境、使用npm包管理工具、使用npm初始化一个项目工程test…...

远程实时监控管理:5G物联网技术助力配电站管理

配电站远程监控管理系统是基于物联网和大数据处理等技术的一种创新解决方案。该系统通过实时监测和巡检配电场所设备的状态、环境情况、安防情况以及火灾消防等信息,实现对配电站的在线实时监控与现场设备数据采集。 配电站远程监控管理系统通过回传数据进行数据系…...

ubuntu 23.04安装中文输入法

使用ubuntu 23.04安装中文输入法,尝试了最新的搜狗,谷歌拼音,fcitx的原始拼音,最终的结果就是使用了谷歌拼音。 搜狗输入法:好用,但是用了没几天发现各种闪退,一打开就闪烁,根本无法…...

java:解析json的几种方式

Java是一种流行的编程语言,它提供了很多实用的库和工具,在处理JSON数据时也不例外。在本文中,我们将介绍Java中如何解析JSON数据。 JSON是一种轻量级的数据交换格式,它已经成为Web应用程序中最流行的数据格式之一。Java提供了许多…...

pytorch_神经网络构建1

文章目录 pytorch简介神经网络基础分类问题分析:逻辑回归模型逻辑回归实现多层神经网络多层网络搭建保存模型 pytorch简介 为什么神经网络要自定义数据类型torch.tensor? tensor可以放在gpu上训练,支持自动求导,方便快速训练,同时支持numpy的运算,是加强版,numpy不支持这些 为…...

Android 多线程并发详解

一,基础概念 1.1什么是CPU 中央处理器(CPU),是电子计算机的主要设备之一,电脑中的核心配件。其功能主要是解释计算机指令以及处理计算机软件中的数据。CPU是计算机中负责读取指令,对指令译码并执行指令的…...

系统架构设计:8 论软件架构风格

目录 一 软件架构风格 1 数据流风格 (1)批处理风格 (2)管道-过滤器风格...

[Elasticsearch] 邻近匹配 (一) - 短语匹配以及slop参数

本文翻译自Elasticsearch官方指南的Proximity Matching一章。 邻近匹配(Proximity Matching) 使用了TF/IDF的标准全文搜索将文档,或者至少文档中的每个字段,视作"一大袋的单词"(Big bag of Words)。match查询能够告诉我们这个袋子中是否包含了…...

Bootstrap中让元素尽可能往父容器的左侧靠近或右侧造近(左浮动和右浮动)

在Bootstrap中,float-left是一个用于浮动元素的CSS类。它的作用是将一个元素向左浮动,使其在父容器内尽可能靠近左侧边缘,同时允许其他元素在其右侧排列。 使用float-left类可以创建多列布局,将元素水平排列在一行上,…...

网络流量安全分析-工作组异常

在网络中,工作组异常分析具有重要意义。以下是网络中工作组异常分析的几个关键点: 检测网络攻击:网络中的工作组异常可能是由恶意活动引起的,如网络攻击、病毒感染、黑客入侵等。通过对工作组异常的监控和分析,可以快…...

Flink之Watermark源码解析

1. WaterMark源码分析 在Flink官网中介绍watermark和数据是异步处理的,通过分析源码得知这个说法不够准确或者说不够详细,这个异步处理要分为两种情况: watermark源头watermark下游 这两种情况的处理方式并不相同,在watermark的源头确实是异步处理的,但是在下游只是做的判断,这…...

基于支持向量机SVM和MLP多层感知神经网络的数据预测matlab仿真

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 一、支持向量机(SVM) 二、多层感知器(MLP) 5.算法完整程序工程 1.算法运行效果图预览 2.算法运行软件版本 matlab2022a 3.部分核心程序 .…...

【微服务】RedisSearch 使用详解

目录 一、RedisJson介绍 1.1 RedisJson是什么 1.2 RedisJson特点 1.3 RedisJson使用场景 1.3.1 数据结构化存储 1.3.2 实时数据分析 1.3.3 事件存储和分析 1.3.4 文档存储和检索 二、当前使用中的问题 2.1 刚性数据库模式限制了敏捷性 2.2 基于磁盘的文档存储导致瓶…...

第三章 栈、队列和数组

第三章 栈、队列、数组 栈栈的基本概念栈的顺序实现栈的链接实现栈的简单应用和递归 队列队列的基本概念队列的顺序实现队列的链接实现 数组数组的逻辑结构和基本运算数组的存储结构矩阵的压缩存储 小试牛刀 栈和队列可以看作是特殊的线性表,是运算受限的线性表 栈 …...

使用GitLab CI/CD 定时运行Playwright自动化测试用例

创建项目并上传到GitLab npm init playwright@latest test-playwright # 一路enter cd test-playwright # 运行测试用例 npx playwright test常用指令 # Runs the end-to-end tests. npx playwright test# Starts the interactive UI mode. npx playwright...

Suricata + Wireshark离线流量日志分析

目录 一、访问一个404网址,触发监控规则 1、使用python搭建一个虚拟访问网址 2、打开Wireshark,抓取流量监控 3、在Suricata分析数据包 流量分析经典题型 入门题型 题目:Cephalopod(图片提取) 进阶题型 题目:抓到一只苍蝇(数据包筛选…...

JMeter基础 —— 使用Badboy录制JMeter脚本!

1、使用Badboy录制JMeter脚本 打开Badboy工具开始进行脚本录制: (1)当我们打开Badboy工具时,默认就进入录制状态。 如下图: 当然我们也可以点击录制按钮进行切换。 (2)在地址栏中输入被测地…...

3D孪生场景搭建:3D漫游

上一篇 文章介绍了如何使用 NSDT 编辑器 制作模拟仿真应用场景,今天这篇文章将介绍如何使用NSDT 编辑器 设置3D漫游。 1、什么是3D漫游 3D漫游是指基于3D技术,将用户带入一个虚拟的三维环境中,通过交互式的手段,让用户可以自由地…...

三、综合——计算机应用基础

文章目录 一、计算机概述二、计算机系统的组成三、计算机中数据的表示四、数据库系统五、多媒体技术5.1 多媒体的基本概念5.2 多媒体计算机系统组成5.3 多媒体关键硬件一、计算机概述 1854 年,英国数学家布尔(George Boo1e,1824-1898 年)提出了符号逻辑的思想,数十年后形成了…...

【Redis】SpringBoot整合redis

文章目录 一、SpringBoot整合二、RedisAutoConfiguration自动配置类1、整合测试一下 三、自定义RedisTemplete1、在测试test中使用自定义的RedisTemplete2、自定义RedisTemplete后测试 四、在企业开发中,大部分情况下都不会使用原生方式编写redis1、编写RedisUtils代…...

Python自动化抢票实战:告别手动抢票,用技术提升成功率

Python自动化抢票实战:告别手动抢票,用技术提升成功率 【免费下载链接】damaihelper 支持大麦网,淘票票、缤玩岛等多个平台,演唱会演出抢票脚本 项目地址: https://gitcode.com/gh_mirrors/dam/damaihelper 在演唱会门票秒…...

ChatGLM3-6B Streamlit应用案例:代码辅助、长文档摘要、闲聊三合一

ChatGLM3-6B Streamlit应用案例:代码辅助、长文档摘要、闲聊三合一 1. 项目简介:你的本地全能AI助手 想象一下,你正在写一段复杂的代码,卡在某个逻辑上;或者面对一份几十页的技术文档,需要快速提炼核心&a…...

Youtu-VL-4B-Instruct问题解决:服务启动失败?常见错误排查与修复

Youtu-VL-4B-Instruct问题解决:服务启动失败?常见错误排查与修复 1. 服务启动失败的常见表现 当你尝试启动Youtu-VL-4B-Instruct服务时,可能会遇到以下几种典型问题: 1.1 端口冲突错误 最常见的错误是端口已被占用&#xff0c…...

ANIMATEDIFF PRO电商创新:WebAR商品试穿系统

ANIMATEDIFF PRO电商创新:WebAR商品试穿系统 最近跟几个做电商的朋友聊天,他们都在抱怨同一个问题:商品退货率太高了。尤其是服装鞋帽这类需要试穿的商品,用户光看图片和模特展示,根本拿不准自己穿上到底合不合适、好…...

M2FP在虚拟试衣间的应用:快速识别人体部位,助力电商设计

M2FP在虚拟试衣间的应用:快速识别人体部位,助力电商设计 1. 虚拟试衣间的技术挑战 在电商领域,虚拟试衣技术正在改变用户的购物体验。传统试衣间面临诸多痛点: 用户无法直观看到服装上身效果退换货率高,增加运营成本…...

从Linux内核页表映射到用户态HugeTLB池:金融级C++内存池的7层硬件协同优化法(仅限TOP20对冲基金内部文档解密版)

第一章:金融高频交易C内存池的硬件协同优化全景图在纳秒级响应要求的金融高频交易系统中,C内存池不再仅是软件抽象层的性能补丁,而是CPU缓存子系统、内存控制器与DRAM物理特性的协同执行面。现代x86-64平台(如Intel Ice Lake-SP或…...

SenseVoice-Small ONNX精彩案例分享:10分钟会议录音→带标点可编辑文本

SenseVoice-Small ONNX精彩案例分享:10分钟会议录音→带标点可编辑文本 本文展示SenseVoice-Small ONNX语音识别工具在实际会议录音转写场景中的惊艳效果,通过真实案例演示如何将10分钟会议录音快速转换为带标点、可编辑的规范文本。 1. 案例背景与工具价…...

探秘 Awesome Rust:你的Rust学习与实践终极宝典 [特殊字符]

探秘 Awesome Rust:你的Rust学习与实践终极宝典 🚀 Awesome Rust是一个精心策划的Rust代码和资源集合,为开发者提供了完整的Rust生态系统指南。无论你是Rust新手还是经验丰富的开发者,这个项目都能为你节省大量寻找优质工具和库的…...

ClassGraph构建时扫描:Android注解处理的完整解决方案

ClassGraph构建时扫描:Android注解处理的完整解决方案 【免费下载链接】classgraph An uber-fast parallelized Java classpath scanner and module scanner. 项目地址: https://gitcode.com/gh_mirrors/cl/classgraph ClassGraph是一个超高速并行化的Java类…...

rk3576(5)之设备树下GPIO驱动

1、简介rk3576buildroot设备树GPIO驱动编写。个人理解设备树就相当于存在统一规则、统一管理的头文件,记录了开发板的设备信息。2、设备树语法2.1、dtsi 头文件设备树也支持头文件,设备树的头文件扩展名为.dtsi设备树文件不仅可以应用 C 语言里面的.h 头…...