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

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

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

相关阅读

相关 shiro 配置相关的使用

shiro 作为一套成熟的权限管理框架，之前好好学了一下，在补充点内容吧 package com.wds.site.test.shiro; impo

我就是我/ 2022年12月11日 05:23/ 0 赞/ 112 阅读

相关 Vue相关指令的使用

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

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

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

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

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

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

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

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

相关如何在vue里引入Bootstrap

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

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

相关 BootStrap的CDN加速引入BootStrap相关资源文件

做东西的时候，下载BootStrap时不知道是怎么回事本地的BootStrap用不了，应该是我下的不对，然后就i想用CDN引入资源文件，在网上各种奇葩的各种方法很多都是误导的，

ゞ浴缸里的玫瑰/ 2022年01月21日 01:13/ 0 赞/ 264 阅读

相关在vue中使用sass的配置的方法

1、安装sass的依赖包 npm install --save-dev sass-loader //sass-loader依赖于node-sass

比眉伴天荒/ 2021年12月24日 14:57/ 0 赞/ 392 阅读

相关 vue中使用bootstrap框架

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

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

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

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

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

相关 Vue相关问题总结

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

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