vue中如何引入bootstrap

第一步先安裝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官方中文文檔