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

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

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

相关文章

C#实现OPC DA转OPC UA服务器

运行软件前提前安装好OPC运行组件: 为方便演示,提前准备好了一个DAServer服务器: 接下来开始配置: 该软件主要实现的功能如下: 配置过程也相对简单: 第一步: 编辑如下文件: 第二步…

Android攻城狮学鸿蒙-配置

1、config.json配置 鸿蒙中的config.json应该类似于Android开发中Manifest.xml,可以进行页面的配置。根据顺序,会识别启动应用的时候,要打开哪个界面。 2、 Ability详解,以及与Android的Activity对比。 他人的学习文章连接&…

asp.net网上销售系统VS开发mysql数据库web结构c#编程Microsoft Visual Studio计算机毕业设计

一、源码特点 asp.net 网上销售系统 是一套完善的web设计管理系统,系统具有完整的源代码和数据库,系统主要采用B/S模式开发。开发环境为vs2010,数据库为mysql,使用c#语言开发 aspnet 网上销售系统1 二、功能介绍 前台功能…

pdf文档内容提取pdfplumber、PyPDF2

测试pdfplumber识别效果好些;另外pdf这两个如果超过20多页就没法识别了,结果为空 1、pdfplumber 安装:pip install pdfplumber -i http://mirrors.aliyun.com/pypi/simple --trusted-host mirrors.aliyun.com代码: import pdfpl…

《C++ Primer》第5章 语句

参考资料: 《C Primer》第5版《C Primer 习题集》第5版 5.1 简单语句(P154) 在一个表达式的末尾加上 ; 就构成了表达式语句,其作用是执行表达式并丢弃结果。 空语句 由单独的 ; 构成的语句为空语句。空语句常用于语法上需要一…

Vue中的router路由的介绍(快速入门)

路由的介绍 文章目录 路由的介绍1、VueRouter的介绍2、VueRouter的使用(52)2.1、5个基础步骤(固定)2.2、两个核心步骤 3、组件存放的目录(组件分类) 生活中的路由:设备和ip的映射关系(路由器) V…

Ceph入门到精通-Nginx超时参数分析设置

nginx中有些超时设置,本文汇总了nginx中几个超时设置 Nginx 中的超时设置包括: “client_body_timeout”:设置客户端向服务器发送请求体的超时时间,单位为秒。 “client_header_timeout”:设置客户端向服务器发送请…

5项先进采购技术,帮助你的企业脱颖而出

持续的改进对保持每个企业的正常运转有着重要作用,采购部门也不例外。 以前,采购团队主要关注两个方面:降低成本和减少风险。随着自动化和云服务的兴起,如今他们还需要关注采购决策的效率、可访问性和可持续性。 技术与采购的融合…

【AI视野·今日Robot 机器人论文速览 第四十八期】Thu, 5 Oct 2023

AI视野今日CS.Robotics 机器人学论文速览 Thu, 5 Oct 2023 Totally 32 papers 👉上期速览✈更多精彩请移步主页 Daily Robotics Papers LanguageMPC: Large Language Models as Decision Makers for Autonomous Driving Authors Hao Sha, Yao Mu, Yuxuan Jiang, Li…

对音频切分成小音频(机器学习用)

我是把so-vits中小工具,分析源码然后提取出来了。以后可以写在自己的程序里。 -------流程(这是我做的流程,你可以不用看) 从开源代码中快速获取自己需要的东西 如果有界面f12看他里面的接口,然后在源码中全局搜索&…

Stable Diffusion生成图片

画质 masterpiece,best quality,illustration,extremely detail CG unity 8k wallpaper,ultra-detailed,depth of field 杰作,最佳质量,插图,极度详细的8K壁纸,超高详细度,景深 画风 Chinese ink painting,water color…

如何在虚幻引擎中渲染动画?

大家好,今天我将展示如何在虚幻引擎中渲染动画,以及虚幻引擎渲染动画怎么设置的方法步骤。 需要提前了解: 虚幻引擎本地运行慢、渲染慢、本地配置不够,如何解决? 渲云云渲染支持虚幻引擎离线渲染,可批量…

【Python】WebUI自动化—Selenium的下载和安装、基本用法、项目实战(16)

文章目录 一.介绍二.下载安装selenium三.安装浏览器驱动四.QuickStart—自动访问百度五.Selenium基本用法1.定位节点1.1.单个元素定位1.2.多个元素定位 2.控制浏览器2.1.设置浏览器窗口大小、位置2.2.浏览器前进、刷新、后退、关闭3.3.等待3.4.Frame3.5.多窗口3.6.元素定位不到…

一文5000字详解Pytest单元测试,看完不会来打我【保姆级教程】

一、pytest单元测试框架 1.什么是单元测试框架? 单元测试是指在软件开发当中针对软件的最小单位(函数、方法)进行正确性的检查测试 2.单元测试框架有哪些? Java:junit 和 testing python:unittest 和 …

SI314软硬件兼容替代GTX314L—低功耗14通道电容触摸传感器

Si314是一款具有自动灵敏度校准功能的14通道电容传感器,其工作电压范围为1.8~5.5V。 Si314设置休眠模式来节省功耗,此时,功耗电流为10uA3.3V。 Si314各个感应通道可实现独立使能、校准、灵敏度调节,可以确保可靠性,且具…

linux 安装下载conda并创建虚拟环境

目录 1. 下载安装2. 创建虚拟环境1. 下载安装 在window操作系统中下载anconda包,并通过scp传输到ubuntu操作系统 具体anconda包在如下界面: anconda包 目录 博主选择了最新的包:Anaconda3-2023.09-0-Linux-x86_64.sh 通过scp传输到ubuntu操作系统中: 并在ubuntu操作系…

Linux 安全 - LSM源码分析

文章目录 前言一、简介1.1 DAC 和 MAC1.2 LSM 调用流程图 二、LSM相关数据结构2.1 struct security_hook_list2.2 union security_list_options2.3 structure security_hook_heads 三、security_bprm_check四、LSM 源码分析3.1 early_security_init3.2 security_init3.2.1 secu…

第二证券:市场情绪或逐步修复 十月行情值得期待

第二证券指出,周一A股商场探底回升、小幅轰动收拾,沪指全天底子出现先抑后扬的运转特征。其时上证综指与创业板指数的平均市盈率分别为12.46倍、33.94倍,处于近三年中位数以下水平,商场估值仍然处于较低区域,合适中长期…

华为OD机考B卷 | 100分】阿里巴巴找黄金宝箱(JAVA题解——也许是全网最详)

前言 本人是算法小白,甚至也没有做过Leetcode。所以,我相信【同为菜鸡的我更能理解作为菜鸡的你们的痛点】。 题干 1. 题目描述 一贫如洗的樵夫阿里巴巴在去砍柴的路上,无意中发现了强盗集团的藏宝地,藏宝地有编号从0~N的箱子&…

【C++设计模式之责任链模式:行为型】分析及示例

简介 责任链模式是一种行为型设计模式,它允许将请求沿着处理链传递,直到有一个处理器能够处理该请求。这种模式将请求的发送者和接收者解耦,同时提供了更高的灵活性和可扩展性。 描述 责任链模式由多个处理器组成一个处理链,每…