作为 web 开发人员,很多人用的样式库,最多的应该就是 bootstrap 吧, 那么使用 VUE 来进行项目开发,如何引入 bootstrap 呢?

首先 使用 cli 进行初始化项目,这里就不多说了.

使用 npm 进行安装

npm install bootstrap --save

当前安装的是版本是 bootstrap@4.1.3 ,可能随着版本变化,应该会有所升级

接着 引入安装好的 bootstrap , 编辑 main.js

.
.
.
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min.js'
.
.
.

ok,上面我们引入了 b4 的 css 以及 js,但是如果你是全新的项目,直接 执行以上步骤,应该会报如下错误:

1_1537346722_XHPaVt8Q5e.pngfile

提示我们 jquery 以及 popper.js 找不到,并,让我们进行安装 那么,安装好了

npm install --save jquery popper.js

这样就引入了 bootstrap 样式 以及他的 js 了,随便打开一个组件,编写 b4 的语法,即可看到效果

其实,还有一套专门为 vue 开发的 bootstrapbootstrap-vue 关于他的用法,直接看 bootstrap-vue 官方文档 就好了。

我们既然安装了 jQuery 那么在组件中就要使用,如何使用 jQuery呢? 打开 build\webpack.base.conf.js ,首先引入 webpack

const webpack = require("webpack")

其次~ 在 webpack.base.conf.js 中的 module.exports = {} 添加如下内容:

plugins: [
    new webpack.ProvidePlugin({
    jQuery: "jquery",
    $: "jquery"
    })  
],

最后在 main.js 中 引入jQuery

import 'bootstrap/dist/css/bootstrap.min.css'
import $ from 'jquery/dist/jquery.min.js'
import 'bootstrap/dist/js/bootstrap.min.js'

这样,我们就在项目中引入了 b4,并且配置了 jQuery.

关于极客返利

极客返利 是由我个人开发的一款网课返利、返现平台。包含 极客时间返现、拉勾教育返现、掘金小册返现、GitChat返现。目前仅包含这几个平台。后续如果有需要可以考虑其他平台。 简而言之就是:你买课,我返现。让你花更少的钱,就可以买到课程。

https://geekfl.com

https://geek.laravelcode.cn

版权许可

本作品采用 知识共享署名 4.0 国际许可协议 进行许可。

转载无需与我联系,但须注明出处,注明文章来源 Vue CLI 引入 bootstrap4

联系我

编程怪事
暂无回复
0 / 180