Vue CLI3.0中使用jQuery和Bootstrap的方法

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

时间: 2019-02-28

使用vue与jquery实时监听用户输入状态的操作代码

实现效果:input未输入值,按钮禁用 jquery操作代码: html <input type="text" name="" placeholder="请输入用户名" id="userName" > <button class="disabled" id="login">登录</button> css .disabled { pointer-even

Vue项目中使用jquery的简单方法

前言 在vue项目中,需要实现某些特定的功能时,使用mvvm模式不易实现.因此引入jquery包来完成需求 jquery中的触发事件可以自己定义在mounted中,如果需要使用vue中data的数据,直接使用this.msg是无法使用的,需要另外定义const _this = this, 存储this.之后便可以在事件中使用_this.msg数据了. 需求:在品牌处可以输入,并且会有模糊搜索的下拉框,也可下拉选择,在输入完毕后检验值是否在下拉框中存在,聚焦时蓝色边框,change时如果不存在则红

如何将 jQuery 从你的 Bootstrap 项目中移除(取而代之使用Vue.js)

Bootstrap是网上最流行的前端开发框架. 除了用它,我不知道还有其他更快的方法去构建一个响应式的网站. 但是自从我向网页添加动态功能的工具变成vue.js后.适应bootstrap变得困难起来.因为这带来了一些技术包袱.没错.我说的就是jquery. 这并不是在抨击jquery,我只是意识到,当你已经在项目里使用一些像Vue的框架后,再引入jQuery就会出现一些显著的缺点: 增加开销.jQuery将会使你的网页增加30KB. 在使用诸如webpack一类的打包工具时,jquery也会很难

详解使用Vue.Js结合Jquery Ajax加载数据的两种方式

整理文档,搜刮出一个使用Vue.Js结合Jquery Ajax加载数据的两种方式的代码,稍微整理精简一下做下分享. 废话不多说,直接上代码 html代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo</title> <script src="js/jquery.js"

在vue项目中使用Jquery-contextmenu插件的步骤讲解

使用步骤: 1.安装: npm i jquery-contextmenu --save-dev 2.在main.js文件中引包 import Jquery_contextmenu from 'jquery-contextmenu' Vue.use(Jquery_contextmenu) import 'jquery-contextmenu/dist/jquery.contextMenu.css' 注意: 在引入样式时可以点击进去jquery-contextmenu的安装目录中查找对应的css文件

jquery在vue脚手架中的使用方式示例

本文介绍了jquery在vue脚手架中的使用方式示例,分享给大家,具体如下: 1:在各个vue文件中使用 <script> import '../assets/js/jquery-1.10.2.min.js' export default { data() { return { }, watch: { }, created: function() { }, methods: { list() { this.$router.push({ path: 'list' }); }, }, } $(do

详解在vue-cli中引用jQuery、bootstrap以及使用sass、less编写css

写在前面: 本文是vue-手摸手教你使用vue-cli脚手架-详细步骤图文解析之后,又一篇关于vue-cli脚手架配置相关的文章,因为有些文章步骤不够清晰,当时我引入JQuery.bootstrap的时候颇费了一番功夫,所以本文的步骤会尽量详细一点. 引入bootstrap 1. 下载所需要的bootstrap文件. 将要使用的bootstrap文件放入src目录下的assets文件夹中. 2. 在入口文件src/main.js中引入bootstrap import './assets/boot

Vue中正确使用jQuery的方法

题主Vue小白,入门demo时想在其中使用jQuery(当然可能是不推荐的做法哈,毕竟俩儿的风格不一样,但万一你就需要呢 _^ ^_),结果遇到问题,最终倒腾解决. 编译报错:$ is undefined or no-undef '$' is not defined 假设你已经使用vue-cli搭建好了开发的脚手架,接下来,看下面. 1.NPM 安装 jQuery,项目根目录下运行以下代码 npm install jquery --save 2.webpack配置 在项目根目录下的build目录

vue单页应用中如何使用jquery的方法示例

前言 本文给大家介绍的是关于在vue单页应用中使用jquery的相关内容,主要记录一个今天用到的vue-cli建立的应用中引入jquery的方式.下面话不多说,来一起看看详细的介绍吧. 方法如下: 1.首选通过npm安装jquery npm install jquery --save 2.在build/webpack.base.conf文件当中引入jquery module.exports = { ... resolve: { extensions: ['.js', '.vue', '.json

vue单页应用在页面刷新时保留状态数据的方法

在Vue单页应用中,如果在某一个具体路由的具体页面下点击刷新,那么刷新后,页面的状态信息可能就会丢失掉.这时候应该怎么处理呢?如果你也有这个疑惑,这篇文章或许能够帮助到你 一.问题 现在产品上有个需求:单页应用走到某个具体的页面,然后点击刷新后,刷新的页面要与刷新前的页面要保持一致. 这时候就需要我们保存刷新之前页面的状态. 二.一种解决方案 在这个Vue单页应用中,王二是用Vuex作为状态管理的,一开始王二的思路是将Vuex里的数据同步更新到localStorage里. 即:一改变vuex里的

Vue单页式应用(Hash模式下)实现微信分享的实例

本文介绍了Vue单页式应用(Hash模式下)实现微信分享的实例,分享给大家,具体如下: 前端微信分享的基本步骤: 一.绑定域名: 先登录微信公众平台进入"公众号设置"的"功能设置"里填写"JS接口安全域名".这个不多说,微信开发的都应该清楚. 二.引入js文件: 在需要调用JS接口的页面引入如下JS文件,(支持https):http://res.wx.qq.com/open/js/jweixin-1.0.0.js. 请注意,如果你的页面启用了ht

vue单页应用加百度统计代码(亲测有效)

申请百度统计后,会得到一段JS代码,需要插入到每个网页中去,在Vue.js项目首先想到的可能就是,把统计代码插入到index.html入口文件中,这样就全局插入,每个页面就都有了;这样做就涉及到一个问题,Vue.js项目是单页应用,每次用户浏览网站时,访问内页时页面是不会刷新的,也就意味着不会触发百度统计代码:所以最终在百度统计后台看到的效果就是只统计到了网页入口的流量,却无法统计到内页的访问流量. 解决方法 在main.js文件中调用vue-router的afterEach方法,将统计代码加入

解决vue单页使用keep-alive页面返回不刷新的问题

使用vue单页开发项目时遇到一个很恶心的问题:在列表页点击一条数据进入详情页,按返回键返回列表页时页面刷新了,用户体验非常差啊!!!查阅了一下相关问题,使用<keep-alive>解决这个问题,下面是我的使用心得. <keep-alive>是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM. 首先在App.vue页面上有下面一段代码,我们都知道这是页面渲染的地方 <router-view></router-view> 把这段代码改成

Vue单页应用引用单独的样式文件的两种方式

问题描述 对于.vue的文件来说,也是由结构.行为.样式三部分组成,在样式部分有个scoped的属性,也就是当前页面有效,当style标签内样式比较多时或者.vue文件之间有重复的时候,总感觉看起来不够整洁,所以就需要引入一些公共样式.下面就先说下如何引入单独的样式文件,这里就以CSS文件为例,之后再说下我的项目中的样式文件的划分 引入单独的样式文件 方式一 在main.js中引入静态资源,这种方法使得该样式文件被项目中的组件所共享 // The Vue build version to loa

解决vue单页路由跳转后scrollTop的问题

作为vue的初级使用者,在开发过程中遇到的坑太多了.在看页面的时候发现了页面滚动的问题,当一个页面滚动了,点击页面上的路由调到下一个页面时,跳转后的页面也是滚动的,滚动条并不是在页面的顶部. 最开始我使用了一个很笨的方法,每个页面上都加上window.scrollTop(0,0);来解决问题,但是这个太繁琐了.最后和小伙伴们商量了一下,在main.js页面上加了这么一段代码 router.afterEach(function (to) { window.scrollTo(0, 0) }) 路由跳

解决vue单页面应用中动态修改title问题

详细信息查看:vue-weachat-title 解决问题: 1.Vuejs 单页应用在iOS系统下部分APP的webview中 标题不能通过 document.title = xxx 的方式修改 该插件只为解决该问题而生(兼容安卓) 2.在vue单页面中,通过浏览器分享到QQ.微信等应用中的链接,只有一个首页标题和默认icon图片 已测试:APP 微信 QQ 支付宝 淘宝 安装 npm install vue-wechat-title --save 用法 1.在main.js中引入 impor

vue单页开发父子组件传值思路详解

vue单页开发时经常需要父子组件之间传值,自己用过但是不是很熟练,这里我抽空整理了一下思路,写写自己的总结. GitHub地址:https://github.com/leileibrother/wechat-vue 文件目录如下图,example.vue是父组件,exampleChild.vue是子组件. 父组件引入子组件,父组件html的代码如下: <template> <div> <h3>这是父组件</h3> <p style="marg

vue单页应用的内存泄露定位和修复问题小结

在前端项目(PC端)中,内存泄露的定位往往比修复更加困难,即使google浏览器有提供Memory工具,但是面对成千上万的元素和错综复杂的引用关系,开发则依然很难快速定位到问题代码块. 一.什么是内存泄漏? 系统进程不再用到的内存,没有及时释放,就叫做内存泄漏(memory leak).当内存占用越来越高,轻则影响系统性能,重则导致进程崩溃.Chrome限制了浏览器所能使用的内存极限(64位为1.4GB,32位为1.0GB),这也就意味着浏览器将无法直接操作一些大内存对象. V8引擎在执行垃圾回