Vue CLI 引入 bootstrap4

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

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

使用 npm 进行安装

npm install bootstrap --save

当前安装的是版本是 [email protected] ,可能随着版本变化，应该会有所升级

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

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

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

1_1537346722_XHPaVt8Q5e.png

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

npm install --save jquery popper.js

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

其实，还有一套专门为 vue 开发的 bootstrap ，bootstrap-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://geek.laravelcode.cn

https://geek.idaka.ink

版权许可

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

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

联系我