vue中使用bootstrap4踩坑之旅

最新推荐文章于 2024-08-23 09:56:14 发布

iKendall

最新推荐文章于 2024-08-23 09:56:14 发布

阅读量4.5k

点赞数 1

分类专栏： Vue bootstrap 文章标签： vue+bootstrap4

本文链接：https://blog.csdn.net/weixin_40688217/article/details/96638545

版权

本文档记录了在Vue项目中集成Bootstrap4的过程，包括引入jQuery、配置Webpack、安装Bootstrap和Popper.js，并最终通过BootstrapVue实现组件化。在集成过程中遇到了一些坑，如不需引入bootstrap.js，依赖popper.js等，最终成功实现在Vue中使用Bootstrap4。

摘要由CSDN通过智能技术生成

bootstrapvue官网
 bootstrap4中文官网

以下文章记录本人的踩坑过程，最后已亲测有效，但不保证是最简便的方法，最好的建议是去bootstrapvue官网看文档直接尝试。

一、引入jquery

1.安装jQuery

npm install jquery --save

或

yarn add jquery --save

2.在webpack.base.config.js 添加内容

+++ const webpack = require("webpack");
 module.exports = {
  context: path.resolve(__dirname, '../'),
  entry: {
    app: './src/main.js'
  },
  output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath
  },
 +++ plugins: [

+++ new webpack.ProvidePlugin({