首页 > 其他分享 >新建vite + bootstrap 5 项目

新建vite + bootstrap 5 项目

时间:2024-03-13 16:36:37浏览次数:30  
标签:项目 新建 bootstrap 添加 save vite

1. 新建vite 项目,直接按照官方教程,新建一个 vite + typescript 的项目就可,它默认就是vue的;

 

2. 项目创建好之后,开始添加bootstrap的相关模块:

其实bootstrap的官网上面也有关于vite的集成:Bootstrap & Vite · Bootstrap v5.2 (getbootstrap.com)

在 之前的步骤都已经完成的前提下,执行下面两个命令:

npm i --save bootstrap @popperjs/core
npm i --save-dev sass

3. 再然后,将 styles.scss 添加到项目当中:

 

 4. ts 文件当中添加引用:

 

然后 npm run dev 跑起来,就会发现bootstrap已经生效了。

 

标签:项目,新建,bootstrap,添加,save,vite
From: https://www.cnblogs.com/wenzd/p/18070937

相关文章

  • VMware workstation新建虚拟机网络使用NAT模式的各个问题
    使用Vmwareworkstation创建linux(centos7)虚拟机时,在网络方面可能会碰到各种问题:1.重启后网络就断了,没法开机自启动2.如何配置固定IP3.ping不通www.baidu.com...问题1:重启后网络就断了,没法开机自启动解决:修改配置文件,一般是:/etc/sysconfig/network-scripts/ifcfg-e......
  • 创建Vue3+Vite+TypeScript项目
    一、安装node环境,安装18.0或更高版本的Node.js  推荐使用nvm管理node版本:一看就会使用nvm实现多个版本的node自由切换-始是逍遥人-博客园(cnblogs.com)二、创建项目  1、选择一个工作路径,如:E:\webproject  2、打开cmd命令窗口进入到当前目录    快捷方式:直接......
  • Java登陆第三十四天——使用Vite创建工程化的Vue3项目
    VueVue是基于标准HTML、CSS和JavaScript构建的前端框架,可以更高效地开发前端页面。ViteVite是Vue团队开发的项目管理工具。Maven的主要功能引入依赖项目管理使用Maven可以工程化的管理后端代码。npm的主要功能:引入依赖vite的主要功能:项目管理使用npm+vit......
  • Bootstrap Your Own Latent A New Approach to Self-Supervised Learning论文阅读笔记
    BootstrapYourOwnLatentANewApproachtoSelf-SupervisedLearning论文阅读笔记Abstract​ 我们提出了BYOL,一种新的自监督图像表示学习的方法。BYOL依赖于两个神经网络,即在线网络和目标网络,它们相互作用和相互学习。从一个图像的增广视图出发,我们训练在线网络来预测同一图......
  • 2024-3-8 vite代码快捷键
    1.点击“设置”,选择“用户代码片段”2.输入vue,回车,要选择vue.json文件:3.在文件中写以下内容:其中,“vt”是可以自己设置的快捷方式,在文件中写入下面内容4.在新建的vue文件中输入“vt”,点击回车:5.得到我们要的代码块:......
  • Hexo、VitePress、Docusaurus,哪个最适合你的静态网站生成器?
    在选择合适的静态网站生成器时,Hexo、VitePress、Docusaurus是三个备受关注的选项,那么到底哪一个框架更适合你呢?本文将从使用场景、社区生态、功能、性能、扩展性这五个方面,帮你全方位分析各个框架的优缺点,以便为你的技术选型提供参考。1、应用场景Hexo,官方定位自己是"快速......
  • 新建数据库报错亦或者root 账号无法显示所有数据库
    NavicatPremium创建数据库报1044-Accessdeniedforuser'root'@'%'todatabase1查询权限SELECThost,user,Grant_priv,Super_privFROMmysql.user; 2、修改权限UPDATEmysql.userSETGrant_priv='Y',Super_priv='Y'WHEREUse......
  • 新建数据库顺序思路
      表之间存在三种关系:多对一、一对一、多对多,那如何确定两张表之间的关系呢?按照下述步骤操作即可左表<------------------------------->右表#步骤一:先分析#分析1、先站在左表的角度是否左表的多条记录可以对应右表的一条记录#分析2、再站在右表的角度去找是否右表......
  • SpringBoot3+Consul配置,启动后,居然不读bootstrap.yml的配置文件,直接连本地localhost:8
    问题描述如题。bootstrap.yml的配置文件: consul控制台打印的日志: 解决方案:booststrap.yml的配置文件缩进搞错了,所以压根就没有读到配置。正确的缩进:  ......
  • 如何新建逻辑卷及磁盘挂载,逻辑卷扩容
    一、创建逻辑卷;pvcreate/dev/sdb;#在块设备 /dev/sdb 上创建一个物理卷。vgcreatevg_data/dev/sdb;#使用物理卷 /dev/sdb 创建一个名为 vg_data 的卷组。lvcreate-l100%VG-nlv_datavg_data;#在卷组 vg_data 中创建一个名为 lv_data 的逻辑卷,占用卷组中所有可用空......