在vue-cli項(xiàng)目中使用bootstrap的方法示例
更新時(shí)間：2018年04月21日 09:45:46 作者：Chiu
本篇文章主要介紹了在vue-cli項(xiàng)目中使用bootstrap的方法示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
在一個(gè)html頁面中加入bootstrap是很方便，就是一般的將css和js文件通過Link和Script標(biāo)簽就行。
那么在一個(gè)用vue-vli生成的前端項(xiàng)目中如何加入？因?yàn)榭蚣懿灰粯恿?，略微要適應(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>
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
詳解element-ui中el-select的默認(rèn)選擇項(xiàng)問題
這篇文章主要介紹了詳解element-ui中el-select的默認(rèn)選擇項(xiàng)問題，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
Vue中el-tree樹全部展開或收起的實(shí)現(xiàn)示例
本文主要介紹了Vue中el-tree樹全部展開或收起的實(shí)現(xiàn)示例，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
這篇文章主要介紹了在vue中安裝使用sass的實(shí)現(xiàn)方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
Vue如何動(dòng)態(tài)改變列表搜索出關(guān)鍵詞的字體顏色
這篇文章主要介紹了Vue如何動(dòng)態(tài)改變列表搜索出關(guān)鍵詞的字體顏色問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
Vue 中指令v-bind動(dòng)態(tài)綁定及與v-for結(jié)合使用詳解
這篇文章主要為大家介紹了Vue 中指令v-bind動(dòng)態(tài)綁定及與v-for結(jié)合使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
使用vite創(chuàng)建vue3之vite.config.js的配置方式
這篇文章主要介紹了使用vite創(chuàng)建vue3之vite.config.js的配置方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
vue中el-select中多選回顯數(shù)據(jù)后沒法重新選擇和更改的解決
本文主要介紹了vue中el-select中多選回顯數(shù)據(jù)后沒法重新選擇和更改解決,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-01-01
這篇文章主要為大家介紹了vue之mixin的使用，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-11-11
在for循環(huán)中生成的元素要加key屬性不僅是在Vue框架中是要添加的，在React框架中也是要添加的。但\其實(shí)都不是必須的，因?yàn)樵?Vue和React中不加key是不會(huì)報(bào)錯(cuò)的，只是會(huì)有警告。但是我們?cè)谏钊肓私饧觡ey的原因后會(huì)明白，若想確保沒有隱患的話，元素還是必須要加key屬性。2021-05-05
詳解如何在Vue項(xiàng)目中實(shí)現(xiàn)累加動(dòng)畫
這篇文章主要為大家詳細(xì)介紹了如何在你的Vue項(xiàng)目中實(shí)現(xiàn)累加動(dòng)畫，文中的示例代碼簡潔易懂，具有一定的參考價(jià)值，感興趣的小伙伴可以了解一下2023-06-06