Vue CLI3.0中使用jQuery和Bootstrap的方法
Vue 中使用 jQuery 和 Bootstrap 不是特別符合 Vue 原生的寫法,但是有時候又要用,所以放上我的引入設置,供大家參考。
在 Vue CLI2.0 中引入 jQuery 和 Bootstrap 需要設置很多配置項,網(wǎng)上有很多方法法,這里不重復寫了。直接上 Vue CLI3.0 配置步驟。
第一步:安裝 jQuery、 Bootstrap、popper.js依賴。
其中popper.js 用于在 Bootstrap 中顯示彈窗、提示、下拉菜單,所以需要引入。
npm install jquery bootstrap@3 popper.js --save
注意:上面的 bootstrap@3 指的是安裝 Bootstrap 第三版,如果不加 @3 符號,默認安裝第四版。
第二步:配置 main.js
引入 Boostrap 請看配置文件。
//main.js
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
//在這里引入 bootstrap。默認只引入 bootstrap 中的 js,css 需要另外引入,我的 bootstrap.ss 在APP.vue中引入的
import "bootstrap";
//也可以在這里引入 bootstrap.css ;
//import "bootstrap/dist/css/bootstrap.css";
Vue.config.productionTip = false;
new Vue({
router: router,
store: store,
render: h => h(App)
}).$mount("#app");
我的 APP.vue 的配置,只是引入 bootstrap.css,代碼僅供參考。
<style> // 因為我的 bootstrap 文件經(jīng)過了我自己的調(diào)整,所以單獨放在 assets 文件夾中做單獨引入。 //如果你只是想使用原生的 bootstrap,直接在 main.js 中引入 css 文件即可。 @import "./assets/css/bootstrap.css"; </style>
第三步:配置 vue.config.js 文件
Vue CLI3.0 中的所有配置都在 vue.config.js 文件,你在這里配置好,腳手架自動使用你的配置覆蓋掉默認的配置。
如果你的項目中沒有 vue.config.js 文件,請你在 package.json 文件的同級目錄新建一個 vue.config.js 文件。文件內(nèi)具體的配置如下:
const webpack = require("webpack");
module.exports = {
//configureWebpack 是Vue CLI3.0 中用于配置 webpack 插件參數(shù)的地方,你在這里設置,會新建或者覆蓋 webpack 默認配置。
//webpack ProvidePlugin 的含義是創(chuàng)建一個全局的變量,使這個變量在 webpack 各個模塊內(nèi)都可以使用。這里的配置含義是創(chuàng)建 '$'、'jQuery'、'window.jQuery' 三個變量指向 jquery 依賴,創(chuàng)建 'Popper' 變量指向 popper.js 依賴。
configureWebpack: {
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery',
Popper: ['popper.js', 'default']
})
]
}
}
第四步:具體使用范例
我做了一個 tooltip 的示例,鼠標放上去會出現(xiàn) tooltip 提示
//template
<template>
<div class="content-wrap">
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>
<button type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>
<button type="button" class="btn btn-warning" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>
<button type="button" class="btn btn-danger" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>
</div>
</template>
<script>
export default {
name: "componentsTooltips",
mounted: function() {
//在頁面加載完畢后初始化 tooltip, 相當于$(function(){ $('[data-toggle="tooltip"]').tooltip(); }
$('[data-toggle="tooltip"]').tooltip();
}
};
</script>
如果 eslint 報誤,請設置 .eslintrc.js 文件。
module.exports = {
env: {
node: true,
jquery: true
}
};
本人測試結果如下:

參考文檔:
Vue CLI3.0: https://cli.vuejs.org/zh/guide/webpack.html
Bootstrap tooltip :https://v3.bootcss.com/javascript/#tooltips
Stackoverflow: https://stackoverflow.com/questions/42684661/adding-bootstrap-to-vue-cli-project
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
基于Vue3和element-plus實現(xiàn)登錄功能(最終完整版)
這篇文章主要介紹了基于Vue3和element-plus實現(xiàn)一個完整的登錄功能,本文結合示例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-03-03
vue 實現(xiàn) ios 原生picker 效果及實現(xiàn)思路解析
這篇文章主要介紹了vue 實現(xiàn) ios 原生picker 效果及實現(xiàn)思路解析,本文給大家介紹的非常詳細,具有參考借鑒價值,需要的朋友可以參考下2017-12-12
VUE?el-table列表搜索功能純前端實現(xiàn)方法
Vue表搜索是指在Vue應用中實現(xiàn)對表格數(shù)據(jù)的搜索功能,下面這篇文章主要給大家介紹了關于VUE?el-table列表搜索功能純前端實現(xiàn)的相關資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-09-09
如何解決npm i下載依賴的時候出現(xiàn)某依賴版本沖突
這篇文章主要介紹了如何解決npm i 下載依賴的時候出現(xiàn)某依賴版本沖突問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
vue.js與element-ui實現(xiàn)菜單樹形結構的解決方法
本文通過實例給大家介紹了vue.js與element-ui實現(xiàn)菜單樹形結構,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2018-04-04

