Vue 中使用 jQuery 和 Bootstrap 不是特别符合 Vue 原生的写法,但是有时候又要用,所以放上我的引入设置,供大家参考。
在 Vue CLI2.0 中引入 jQuery 和 Bootstrap 需要设置很多配置项,网上有很多方法法,这里不重复写了。直接上 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 文件经过了我自己的调整,所以单独放在 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 文件。文件内具体的配置如下:
const webpack = require("webpack"); module.exports = { //configureWebpack 是Vue CLI3.0 中用于配置 webpack 插件参数的地方,你在这里设置,会新建或者覆盖 webpack 默认配置。 //webpack ProvidePlugin 的含义是创建一个全局的变量,使这个变量在 webpack 各个模块内都可以使用。这里的配置含义是创建 '$'、'jQuery'、'window.jQuery' 三个变量指向 jquery 依赖,创建 'Popper' 变量指向 popper.js 依赖。 configureWebpack: { plugins: [ new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery', 'window.jQuery': 'jquery', Popper: ['popper.js', 'default'] }) ] } }
第四步:具体使用范例
我做了一个 tooltip 的示例,鼠标放上去会出现 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
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。