最近在准备写我的新版本个人主页,因为打算重新从新建的项目重新开始,所以这次使用了Vue-Cli 3和Bootstrap 5。但官方的解决方案只支持到Vue2 和BootStrap4,网上的解决方案也都没能100%解决我的问题,所以写一篇文章记录一下。

先新建一个空白项目进行测试,如果测试好也方便打包成预设,方便我们下次使用的时候进行调用。(嗯,我懒得以后还要重新弄,毕竟bootstrap是个不错的框架)创建好后,先让项目跑起来,保证没有报错。

第一步:安装

用NPM安装好框架,以及Popper.js,当然如果你不需要下拉菜单、弹出窗口和工具提示这三个组件,可以不安装popper.js

npm i --save bootstrap @popperjs/core

当然,也可以用cnpm,如果你的网络不允许使用npm的话。

cnpm i --save bootstrap @popperjs/core

看到提示 added 2 packages in 3s 即为安装成功,反之则为失败。

值得注意的是,网上的一部分教程由于时间比较久远,都提到了安装和引入jQuery,然而实际上新版本已经取消了对jQuery的依赖,所以如果不需要不必额外安装jQuery,避免带来不必要的麻烦。

第二步:引用

在引用之前可以先在Vue项目的图形化管理页面里面查看一下Bootstrap和Popper.js是否已经安装成功。

在“依赖”选项卡中出现这两个就代表已经安装成功了。

用编辑器打开main.js,在下面粘贴上下面两行代码即可引入。

import 'bootstrap/dist/css/bootstrap.min.css' //引入BootCSS
import 'bootstrap/dist/js/bootstrap.min.js' //引入BootJS

popper.js在bootstrap的js中已经有做引入,在这一版本中如不额外需要,不需要重复引入。

随便插入一段官网的案例在主页测试一下,发现使用正常就代表我们引入成功了。

另外,我也给它做成了预设,可以在创建项目的时候直接创建引入好Bootstrap的Vue项目,并放到了GitHub上,下次再此创建的时候,可以直接拉取git预设创建。

发表回复

后才能评论