Skip to main content
 首页 » 编程设计

vue中如何引入bootstrap

2022年07月16日46JeffreyZhao

第一步先安装jquery

① 在终端输入   

npm install jquery --save-dev

②  build文件夹中的webpack.config.js 添加以下内容

const webpack = require("webpack");

如图:

然后在module.exports里添加

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

如图:

③  在入口文件main.js 里面添加

import $ from 'jquery' ;

如图:

 

④  然后在components文件夹中里新建一个vue,添加代码测试jq引入是否成功

<template> 
  <div> 
    <p>Hello World</p> 
  </div> 
</template> 
 
<script> 
export default { 
  name: "HelloWorld", 
}; 
$(function() {  
  $("p").click(function() { 
    alert("Welcome to zhengzhou"); 
  }); 
}); 
</script> 
<style scoped> 
 
</style>

点击HelloWorld弹出Welcome to zhengzhou即为引入成功

如图:

第二步:安装Bootstrap

①   在终端输入   

npm install --save-dev bootstrap

②  在入口文件main.js里添加以下代码,引入bootstrap的css和js

import'./node_modules/bootstrap/dist/css/bootstrap.min.css'; 
 
import './node_modules/bootstrap/dist/js/bootstrap.min.js';

如图:

③  刚刚创建的vue组件中添加一段Bootstrap代码

<div class="btn-group" role="group" aria-label="...">   
      <button type="button" class="btn btn-default">Left</button>   
      <button type="button" class="btn btn-default">Middle</button>   
      <button type="button" class="btn btn-default">Right</button>   
</div> 

运行,查看效果  这些按钮已经变成Bootstrap按钮组了

如图:

 完成!

bootstrap官方中文文档


本文参考链接:https://www.cnblogs.com/wulicute-TS/p/11864395.html