vue引入bootstrap的方法

本文將為大家詳細介紹“vue引入bootstrap的方法”，內容步驟清晰詳細，細節處理妥當，而小編每天都會更新不同的知識點，希望這篇“vue引入bootstrap的方法”能夠給你意想不到的收獲，請大家跟著小編的思路慢慢深入，具體內容如下，一起去收獲新知識吧。

Vue的優點

Vue具體輕量級框架、簡單易學、雙向數據綁定、組件化、數據和結構的分離、虛擬DOM、運行速度快等優勢，Vue中頁面使用的是局部刷新，不用每次跳轉頁面都要請求所有數據和dom，可以大大提升訪問速度和用戶體驗。

一、引入jquery

步驟：

1. 安裝jquery

$ npm install jquery --save-dev

2.在webpack.config.js 添加內容

+ const webpack = require("webpack");module.exports = {    entry: './index.js',    output: {        path: path.join(__dirname, './dist'),        publicPath: '/dist/',        filename: 'index.js'    },  + plugins: [        new webpack.ProvidePlugin({            jQuery: 'jquery',            $: 'jquery'        })    ]}

3.在入口文件index.js 里面添加內容

import $ from 'jquery' ;

4.測試一下是否安裝成功，看看能否彈出'123'

<template>  <div>   Hello world！  </div></template><script>$(function () {      alert(123);   }); export default {};</script><style></style>

二、引入bootstrap

1、安裝Bootstrap

$ npm install --save-dev bootstrap

2、在入口文件index.js里引入相關

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

3、添加一段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>

4、查看效果

如果你能讀到這里，小編希望你對“vue引入bootstrap的方法”這一關鍵問題有了從實踐層面最深刻的體會，具體使用情況還需要大家自己動手實踐使用過才能領會，如果想閱讀更多相關內容的文章，歡迎關注億速云行業資訊頻道！