在vue-cli項(xiàng)目中使用bootstrap的方法示例
更新時(shí)間：2018年04月21日 09:45:46 作者：Chiu
本篇文章主要介紹了在vue-cli項(xiàng)目中使用bootstrap的方法示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
在一個(gè)html頁(yè)面中加入bootstrap是很方便，就是一般的將css和js文件通過(guò)Link和Script標(biāo)簽就行。
那么在一個(gè)用vue-vli生成的前端項(xiàng)目中如何加入？因?yàn)榭蚣懿灰粯恿耍晕⒁m應(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'
測(cè)試jquery
//在vue文件中添加測(cè)試代碼
<script>
$(function () {
alert('234')
})
export default {
name: 'App'
}
</script>
測(cè)試bootstrap
<template>
<div class="container">
<div class="row">
<div class="col-md-6">
<button class="btn btn-primary">測(cè)試按鈕</button>
</div>
</div>
</div>
</template>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue實(shí)現(xiàn)商城秒殺倒計(jì)時(shí)功能
這篇文章主要介紹了vue實(shí)現(xiàn)商城秒殺倒計(jì)時(shí)功能,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-12-12
vue實(shí)現(xiàn)echarts中的儀表盤(pán)
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)echarts中的儀表盤(pán)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要介紹了vue 錄制視頻并壓縮視頻文件的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-07-07
這篇文章主要介紹是八種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渲染從后臺(tái)獲取的json數(shù)據(jù)
這篇文章主要介紹了詳解vue渲染從后臺(tái)獲取的json數(shù)據(jù)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07
使用imba.io框架得到比 vue 快50倍的性能基準(zhǔn)
imba 是一種新的編程語(yǔ)言，可以編譯為高性能的 JavaScript。可以直接用于 Web 編程(服務(wù)端與客戶(hù)端)開(kāi)發(fā)。這篇文章主要介紹了使用imba.io框架,得到比 vue 快50倍的性能基準(zhǔn),需要的朋友可以參考下2019-06-06
這篇文章主要介紹了VsCode里的Vue模板的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08
video.js是一個(gè)擁有h5背景的網(wǎng)絡(luò)視頻播放器，同時(shí)支持h5以及Flash視頻播放，這篇文章主要介紹了vue中使用video.js進(jìn)行視頻播放,需要的朋友可以參考下2019-07-07