在vue項目中引入bootstrap

 

 

安裝流程:  popper ----> jquery -----> bootstrap

 

         1.安裝Popper

                

                1.1安裝指令:npm install --save popper.js

 

                

 

                1.2相關設置

                    A.在build目錄下的webpack.base.conf.js中加入

                            const webpack = require("webpack");

                        

 

                B.在webpack.base.conf.js中module.exports中的plugins添加上Popper:['popper.js','default']（如沒有plugins就創建）,

                    由於下面也要配置jQuery,可以一起設置

                     Popper:['popper.js','default'],

 

                    

 

         2.安裝jquery

            1.1安裝指令

                    npm install jquery --save-dev

 

                

 

            1.2相關配置

 

                A.在build目錄下的webpack.base.conf.js中,在module.exports中找到resolve，在其alias項中添加：

                   'jquery':'jquery',

                    

 

                B. 在module.exports中找到plugins，並添加以下代碼(jquery部分)

                

 

 

                C.在main.js引入jquery

                    import $ from 'jquery' ;

 

                    

                

         3.安裝bootstrap

            

                1.1安裝指令

                    npm install --save-dev bootstrap

 

                

 

 

                1.2在main.js引入相關js和css

                       import 'bootstrap/dist/css/bootstrap.min.css'

                         import 'bootstrap/dist/js/bootstrap.min'            

 

                

 

4.效果

在所需頁面調用bootstrap,如:

            

         4.1代碼:

 

　　　　

<template>
  <div id="app">
    <!-- <img src="./assets/logo.png"> -->
 
 
          <div>
        <var>y</var> = <var>m</var><var>x</var> + <var>b</var>
 
 
    </div>
    <div>
        y = mx + b
    </div>
    <div>
      To switch directories, type <kbd>cd</kbd> followed by the name of the directory.
 
      To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>
    </div>
<div>
   <table class="table table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
</div>
    <!-- <router-view/> -->
  </div>
</template>
 
 
<script>
 
 
export default {
  name: 'App'
}
</script>
 
 
<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

　　

 

 

         4.2效果