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

傷城~ 2021-12-14 09:59 379阅读 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 条评论，379人围观）

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

相关阅读

相关 vue相关配置

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

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

相关在 Vue脚手架中使用 bootstrap框架

基本介绍：都知道，bootstrap框架基于jQuery，因此，想使用bootstrap框架，就得先引入jQuery。第一步，引入jQuery。在项目的根目录下

一时失言乱红尘/ 2023年06月15日 11:09/ 0 赞/ 8 阅读

相关 WebStom VUE相关配置

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

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

相关 Vue相关指令的使用

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

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

相关使用bootstrap碰到的问题

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

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

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

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

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

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

在一个html页面中加入bootstrap是很方便，就是一般的将css和js文件通过Link和Script标签就行。那么在一个用vue-vli生成的前端项目中如何加入？因为

素颜马尾好姑娘i/ 2022年04月10日 01:22/ 0 赞/ 276 阅读

相关如何在vue里引入Bootstrap

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

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

相关 vue中使用bootstrap框架

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

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

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

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

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