在vue使用bootstrap的相关配置问题

傷城~ 2021-12-14 09:59 355阅读 0赞

由于bootstrap是依赖于jquery的，所以在使用时应该先安装jquery。  
安装

npm install jquery bootstrap@3 popper.js --save

然后应该在项目中配置一下内容：  
在webpack.base.conf.js中：  
添加:module.exports=\{ \}中添加配置

plugins: [
        new webpack.optimize.CommonsChunkPlugin('common.js'),
          new webpack.ProvidePlugin({
              $: "jquery",
              jQuery: "jquery",
              "window.jQuery":"jquery",
              Popper: ["popper.js", "default"]
          })
      ],

const  webpack = require("webpack");

在

configureWebpack:{//configureWebpack是vue-cli配置webpack参数的入口。
        plugins: [
      //配置全局变量。$/jQuery/window.jQuery指向jquery  Popper指向默认的popper.js
          new webpack.ProvidePlugin({
              $: "jquery",
              jQuery: "jquery",
              "window.jQuery":"jquery",
              Popper: ["popper.js", "default"]
          })
      ]},

然后就是在main.js中的引用。

//引用jquery，
    import $ from "jquery";
    require('bootstrap');//引用bootstrap，由于默认只是一用bootstrap的js文件，所以要引用css文件。
    require('bootstrap/dist/css/bootstrap.css')
    
    new Vue({
      el: '#app',
      router,
      $,
      components: { App },
      template: '<App/>'
    })

到此结束。

发表评论取消回复

表情：

评论列表（有 0 条评论，355人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue相关配置

.import…from…的from命令后面可以跟很多路径格式，若只给出vue，axios这样的包名，则会自动到node\_modules中加载；若给出相对路径及文件前缀...

你的名字/ 2024年04月17日 19:14/ 0 赞/ 63 阅读

相关 Vue相关问题总结

期公司选用Vue实现了一个CMS的后台管理系统，从零基础搭建到项目完成，遇到了不少问题，同时也成长了很多，下面是自己在平时学习使用过程中总结的一些问题。 vue不仅仅是...

╰+攻爆jí腚メ/ 2024年04月17日 06:08/ 0 赞/ 72 阅读

相关 WebStom VUE相关配置

1.2016及以下的版本需要通过应用市场安装Vue插件往上的都不用了 File-->Settings-->Plugins-->Install JetBrains plug

淡淡的烟草味﹌/ 2023年01月20日 08:10/ 0 赞/ 7 阅读

相关 Vue相关指令的使用

<template> <div id="app"> <img alt="Vue logo" src="./assets/logo.png">

╰半夏微凉°/ 2022年10月14日 00:43/ 0 赞/ 157 阅读

相关使用bootstrap碰到的问题

bootstrap3 顶部固定的导航栏的z-index设置成了1030，导致了我的对话框的遮罩层遮罩不住顶部的导航栏，而我的登陆表单又是在顶部导航栏的，也就造成了可以重复点击登

墨蓝/ 2022年04月21日 14:16/ 0 赞/ 136 阅读

相关 vue-cli+webpack在生成的项目中使用bootstrap方法（二）

[vue-cli+webpack在生成的项目中使用bootstrap方法（一）][vue-cli_webpack_bootstrap]中，是通过手动下载bootstrap库，然

柔情只为你懂/ 2022年04月10日 01:23/ 0 赞/ 346 阅读

相关如何在vue里引入Bootstrap

1. 安装jquery $ npm install jquery --save-dev 2：在webpack.config.js 添加内容 const webpack

￡神魔★判官ぃ/ 2022年01月21日 06:13/ 0 赞/ 379 阅读

相关 vue中使用bootstrap框架

vue中使用bootstrap框架基本介绍第一步，引入jQuery。第二步引入bootstrap框架基本介绍 boots

本是古典何须时尚/ 2021年12月19日 01:19/ 0 赞/ 837 阅读

相关在vue使用bootstrap的相关配置问题

由于bootstrap是依赖于jquery的，所以在使用时应该先安装jquery。安装 npm install jquery bootstrap@3 poppe

傷城~/ 2021年12月14日 09:59/ 0 赞/ 356 阅读

相关 Vue相关问题总结

1：vue组件需要注意的事项？组件参数的data值必须是函数，同时这个函数要求返回一个对象作用：使用函数会形成一个闭包，这样保证每个组件都是一个独立的作用域，不会相互影

桃扇骨/ 2021年08月13日 14:42/ 0 赞/ 405 阅读