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