bootstrapjs开发环境搭建

news2024/12/24 0:05:45

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构建的工程部署到运行时环境中

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1073867.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

直流无刷电机简介

一、 简介 直流无刷电机(简称BLDC)是随着半导体电子技术发展而出现的机电一体化电机,是永磁式同步电机的一种。 直流无刷电机与直流有刷电机的区别:直流有刷电机利用电枢绕组旋转换向;直流无刷电机是采用半导体开关器…

全局变量报错:\Output\STM32.axf: Error: L6218E: Undefined symbol

全局变量报错: .\Output\STM32.axf: Error: L6218E: Undefined symbol key_num (referred from main.o). 这里只说全局变量哦,这是因为你在调用的.c文件里 把定义写在了函数里面,写函数外面就没事了 改为: .h的声明文件根本不用写…

openGauss学习笔记-94 openGauss 数据库管理-访问外部数据库-mysql_fdw

文章目录 openGauss学习笔记-94 openGauss 数据库管理-访问外部数据库-mysql_fdw94.1 编译mysql_fdw94.2 使用mysql_fdw94.3 常见问题94.4 注意事项 openGauss学习笔记-94 openGauss 数据库管理-访问外部数据库-mysql_fdw openGauss的fdw实现的功能是各个openGauss数据库及远程…

vue3中的父子组件传递slot的方式

缘起 目前的 vue3 工程,有处相似的地方,上面是一个 a-step 组件,下面是一个 vxetable 的组件,目前有好几处都是各自复制这两个组件,进行各自的处理。所以就要把这处,改成一个组件,供小伙伴们使用…

什么是列间空调?

列间空调(Chilled Beam Air Conditioning System)是一种先进的空调系统,用于办公室和商业建筑等高要求的室内空间。这种系统采用创新的工作原理,结合空气对流和辐射的方式,提供高效的舒适空调效果。 列间空调系统的工作…

从零开始读懂相对论:探索爱因斯坦的科学奇迹

💂 个人网站:【工具大全】【游戏大全】【神级源码资源网】🤟 前端学习课程:👉【28个案例趣学前端】【400个JS面试题】💅 寻找学习交流、摸鱼划水的小伙伴,请点击【摸鱼学习交流群】 引言 阿尔伯特爱因斯坦…

STM32 Cube项目实战开发过程中--调用Freemodbus通信出现异常问题原因分析--ADC DMA初始化顺序导致串口数据异常问题解决办法

文章目录 1.ADC与DMA初始化顺序导致使用Freemodbus串口通信异常:2.通信异常时串口初始化的顺序为:3.重新调整初始化位置后,通信问题解决:5.重新调整初始化位置后,通信正常:总结:Cube开发库系统默…

利用KerasCV YOLOv8轻松实现目标精确检测

本文中将实现基于KerasCV YOLOv8的交通灯信号检测,并附录完整代码。。 自从You Only Look Once(简称 YOLO)的诞生以来,目标检测问题主要通过深度学习来解决。大多数深度学习架构通过巧妙地将目标检测问题构建为多个小分类问题和回归问题的组合来实现。具体而言,它是通过在…

手动快速批量修改文件名

方法一 1.选中需要批量修改的文件,如图1 图1 2.按F2键,输入文件名。如图2. 图2 3.Enter,效果如图3. 图3 方法二 1.新建记事本文档,输入如下代码。如图4. DIR . /B>文件名列表.csv 含义是:提取出带有“.”的文…

06-Zookeeper选举Leader源码剖析(一)

上一篇:05-Zookeeper典型使用场景实战 一、为什么要看源码 提升技术功底:学习源码里的优秀设计思想,比如一些疑难问题的解决思路,还有一些优秀的设计模式,整体提升自己的技术功底深度掌握技术框架:源码看…

完美解决Android adb install 安装提示 INSTALL_FAILED_TEST_ONLY

完美解决Android adb install 安装提示 INSTALL_FAILED_TEST_ONLY 目录 所遇问题 有些时候我们用命令进行安装apk如下: adb install xxx.apk但是会安装不成功,报如下错误: 错误现象:提示:Failed to install app-d…

【Go】Fyne跨平台图形界面框架使用

😏★,:.☆( ̄▽ ̄)/$:.★ 😏 这篇文章主要介绍Fyne跨平台图形界面框架使用。 学其所用,用其所学。——梁启超 欢迎来到我的博客,一起学习,共同进步。 喜欢的朋友可以关注一下,下次更新…

文本编辑器去除PDF水印

用文本编辑器打开pdf,搜索水印的特殊文字,全部替换。 另外一个水印字母间有空格。 替换完后保存。 重新打开pdf:

国产麒麟V10桌面操作系统上运行WinForm程序

将需要运行的程序拷贝到系统中,如图: 选择exe后点击鼠标右键,选择打开方式,然后选择CrossOver(安装),如图: 打开CrossOver 软件安装程序后,点击选择容器,然后选择Windows 10 容器…

交互式ICP

以下程序演示如何编写交互式ICP查看器。该程序将加载点云并对其进行刚性变换。之后&#xff0c;使用ICP算法将变换后的点云与原来的点云对齐。每次用户按下“空格”&#xff0c;进行ICP迭代&#xff0c;刷新可视化界面。 代码实现 资源准备 monkey.ply #include <string&…

用Python简单的实现一下六大主流小说平台小说下载(附源码)

很多小伙伴学习Python的初衷就是为了爬取小说&#xff0c;方便又快捷~ 辣么今天咱们来分享6个主流小说平台的爬取教程~ 一、流程步骤 流程基本都差不多&#xff0c;只是看网站具体加密反爬&#xff0c;咱们再进行解密。 实现爬虫的第一步? 1、去抓包分析&#xff0c;分析数…

从零开始:制作出色的产品原型图的详细教程

在设计产品的初始版本或模型时&#xff0c;产品原型起着非常重要的作用&#xff0c;可以帮助设计师和团队更好地了解产品需求和用户需求&#xff0c;优化和改进设计&#xff0c;确保设计最终满足用户的需求和期望。如果你不知道如何绘制产品原型图&#xff0c;绘制产品原型图的…

应用开发平台集成工作流系列之14——流程表单实现示例

背景 流程审批&#xff0c;通常对应一个业务表单。这个表单一般有两种实现模式&#xff0c;一是不同的环节对应不同表单&#xff0c;二是做一张大表单&#xff0c;分为不同的区域&#xff0c;从业务角度考虑&#xff0c;前者通常对应复杂业务处理&#xff1b;后面一种则更常见…

苹果手机如何设置软件提醒功能?苹果手机哪个软件有提醒功能?

作为苹果手机用户&#xff0c;我们都希望能够准时接收待办事项或日程提醒&#xff0c;高效完成各项任务和待办事项&#xff0c;例如无论是工作中的重要会议&#xff0c;还是生活中的约会安排&#xff0c;我们都不能够忘记。那么苹果手机如何设置软件的提醒功能呢&#xff1f;苹…

解决 Git:This is not a valid source path/URL

由于sourcetree 可以获取不同仓库的代码&#xff0c;而我的用户名密码比较杂乱&#xff0c;导致经常会修改密码&#xff0c;在新建拉去仓库代码的时候sourcetree 不会提示你密码错误&#xff0c;直接提示 This is not a valid source path/URL。 在已存在的代码仓库&#xff0…