快捷導(dǎo)航

在vue-cli項目中使用bootstrap的方法示例

更新時間：2018年04月21日 09:45:46 作者：Chiu

本篇文章主要介紹了在vue-cli項目中使用bootstrap的方法示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

在一個html頁面中加入bootstrap是很方便，就是一般的將css和js文件通過Link和Script標(biāo)簽就行。

那么在一個用vue-vli生成的前端項目中如何加入？因為框架不一樣了，略微要適應(yīng)一下。

安裝插件

npm install jquery --save
npm install bootstrap --save
npm install popper.js --save

配置webpack.base.conf.js

//在頂部添加
const webpack = require('webpack')

//在module.exports = {}末尾添加下面代碼

module.exports = {
...
plugins: [
  new webpack.ProvidePlugin({
   $: "jquery",
   jQuery: "jquery"
  })
 ]
}

main.js中添加

import $ from 'jquery'
import 'bootstrap'

測試jquery

//在vue文件中添加測試代碼

<script>
$(function () {
 alert('234')
})

export default {
 name: 'App'
}
</script>

測試bootstrap

<template>
<div class="container">
  <div class="row">
    <div class="col-md-6">
      <button class="btn btn-primary">測試按鈕</button>
    </div>
  </div>
</div>
</template>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue實(shí)現(xiàn)商城秒殺倒計時功能
這篇文章主要介紹了vue實(shí)現(xiàn)商城秒殺倒計時功能,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下
2019-12-12
vue實(shí)現(xiàn)echarts中的儀表盤
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)echarts中的儀表盤，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-03-03
vue 錄制視頻并壓縮視頻文件的方法
這篇文章主要介紹了vue 錄制視頻并壓縮視頻文件的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-07-07
八種vue實(shí)現(xiàn)組建通信的方式
這篇文章主要介紹是八種vue實(shí)現(xiàn)組建通信的方式，包括、props 父組件與子組件通信、$emit 子組件父組件傳遞、$emit與props結(jié)合兄弟組件傳值等等，想具體了解的朋友可以參考下面文章的具體內(nèi)容
2021-09-09
Vue使用exceljs導(dǎo)出excel文件的詳細(xì)教程
這篇文章主要為大家詳細(xì)介紹了Vue如何使用exceljs導(dǎo)出excel文件的詳細(xì)教程,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2025-03-03
vue實(shí)現(xiàn)中部導(dǎo)航欄布局功能
這篇文章主要介紹了vue實(shí)現(xiàn)中部導(dǎo)航欄布局功能，本文圖文并茂，代碼實(shí)例相結(jié)合介紹的非常詳細(xì)，需要的朋友參考下吧
2019-07-07
詳解vue渲染從后臺獲取的json數(shù)據(jù)
這篇文章主要介紹了詳解vue渲染從后臺獲取的json數(shù)據(jù)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-07-07
使用imba.io框架得到比 vue 快50倍的性能基準(zhǔn)
imba 是一種新的編程語言，可以編譯為高性能的 JavaScript?？梢灾苯佑糜?Web 編程(服務(wù)端與客戶端)開發(fā)。這篇文章主要介紹了使用imba.io框架,得到比 vue 快50倍的性能基準(zhǔn),需要的朋友可以參考下
2019-06-06
VsCode里的Vue模板的實(shí)現(xiàn)
這篇文章主要介紹了VsCode里的Vue模板的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-08-08
vue使用video.js進(jìn)行視頻播放功能
video.js是一個擁有h5背景的網(wǎng)絡(luò)視頻播放器，同時支持h5以及Flash視頻播放，這篇文章主要介紹了vue中使用video.js進(jìn)行視頻播放,需要的朋友可以參考下
2019-07-07