Vue CLI 引入 bootstrap4

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

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

使用 npm 进行安装

代码语言：javascript复制

npm install bootstrap --save

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

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

代码语言：javascript复制

.
.
.
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 找不到，并，让我们进行安装那么，安装好了

代码语言：javascript复制

npm install --save jquery popper.js

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

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

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

代码语言：javascript复制

const webpack = require("webpack")

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

代码语言：javascript复制

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

最后在 main.js 中引入jQuery

代码语言：javascript复制

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

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

0 人点赞