Webpack项目中引入Bootstrap4.x

悠悠 2021-11-04 11:28 372阅读 0赞

Bootstrap是一个简洁、直观、强悍的前端开发框架，在Web开发中使用频率很高，本文主要记录一下如何在 webpack项目中引入Bootstrap4.x。

由于Bootstrap在各个Vue组件中经常会被用到，为了避免在每一个组件中重复引入，本文将直接在index.html 中引入Bootstrap。

# 文件下载 #

npm install jquery --save // Bootstrap4.x 依赖JQuery，所以需要先安装JQuery
    npm install popper.js --save // Bootstrap4.x 依赖Popper，所以需要先安装Popper
    npm install bootstrap --save // 安装Bootstrap4.x

安装完成后，按照下图所示，将项目node\_modules 文件夹下的如下几个文件拷贝到项目static目录下的相应文件夹中。

*  \\node\_modules\\jquery\\dist\\jquery.min.js
 *  \\node\_modules\\popper.js\\dist\\umd\\popper.min.js
 *  \\node\_modules\\bootstrap\\dist\\js\\bootstrap.min.js
 *  \\node\_modules\\bootstrap\\dist\\css\\bootstrap.min.css

注意：需要复制 **umd** 文件夹下的 **popper.js**** **文件，否则使用时有可能会报错 Uncaught SyntaxError: Unexpected token export popper.js 。

为了能够使用Bootstrap的Font Awesome字体图标，从[官网][Link 1]下载所需文件，将解压获得的 font-awesome.min.css 和整个 font 文件夹一同拷贝到 static目录的图示位置。

*  \\Font-Awesome-3.2.1\\css\\font-awesome.min.css
 *  \\Font-Awesome-3.2.1\\font\\\*

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlbmdqdW5sZWU_size_16_color_FFFFFF_t_70][]

# 修改index.html #

<!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width,initial-scale=1.0">
      
      <link type="text/css" rel="stylesheet" href="./static/css/bootstrap.min.css" />
      
      <link type="text/css" rel="stylesheet" href="./static/css/font-awesome.min.css" />
    
      <title>webpack-demo</title>
    </head>
    
    <body>
      <div id="app"></div>
      
      <script type="text/javascript" src="./static/js/jquery.min.js"></script>
      <script type="text/javascript" src="./static/js/popper.min.js"></script>
      <script type="text/javascript" src="./static/js/bootstrap.min.js"></script>
    </body>
    
    </html>

# 使用Bootstrap #

创建一个示例组件测试一下，组件模板如下：

浏览器端效果如下图所示，按钮样式和图标样式均能正常使用：

![20190809190000159.png][]

[Link 1]: https://www.bootcss.com/p/font-awesome/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlbmdqdW5sZWU_size_16_color_FFFFFF_t_70]: /images/20211104/d2bd3e626e0547bea2c5d4945168dff5.png
[20190809190000159.png]: /images/20211104/3b62231ebea44c2e949ab4083b18dd0a.png