脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue中安装使用jquery

vue中如何安装使用jquery

 更新时间：2023年04月17日 09:23:21   作者：前端程序猿i  
这篇文章主要介绍了vue中如何安装使用jquery的教程，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

vue如何安装使用jquery

首先 npm install jquery --save安装依赖文件

然后在 自己的vue.config,js文件中 进行加载 (要是没有就自己新加一个，在最外层)

将jquery导入进去

module.exports = {
  chainWebpack: config => {
    config.plugin('provide').use(webpack.ProvidePlugin, [{
      $: 'jquery',
      jquery: 'jquery',
      jQuery: 'jquery',
      'window.jQuery': 'jquery'
    }])
  }
}

然后在你需要的地方

import $ from 'jquery'

vue使用npm 安装 jquery、bootstrap

引入jquery

npm install jquery --save-dev

然后在build文件夹下的webpack.base.conf.js文件中添加如下代码

//module.exports 上面添加
var webpack = require('webpack')
//module.exports 里面添加
plugins:[
    new webpack.optimize.CommonsChunkPlugin('common.js'),
    new webpack.ProvidePlugin({
        jQuery:'jquery',
        $:'jquery'    
    })
]

然后进行测试， 验证是否引入成功

在需要用到jquery的页面<script>中引入

import $ from 'jquery'

引入bootstrapvue并安装bootstrapvue

npm i vue bootstrap-vue bootstrap

然后再项目入口文件main.js中添加以下代码

import BootstrapVue from 'bootstrap-vue'
Vue.use(BootstrapVue)
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • Vue3.0利用vue-grid-layout插件实现拖拽布局

    Vue3.0利用vue-grid-layout插件实现拖拽布局

    这篇文章主要介绍了Vue3.0利用vue-grid-layout插件实现拖拽布局，工作中难免遇到需要对页面布局进行拖拽然后改变布局，保存布局，下面文章就围绕Vue3.0利用vue-grid-layout插件实现拖拽布局的相关资料展开详细内容,需要的朋友可以参考一下
    2021-11-11
  • Vue3实现登录表单验证功能

    Vue3实现登录表单验证功能

    这篇文章主要介绍了Vue3实现登录表单验证功能,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2022-06-06
  • 使用Vue动态生成form表单的实例代码

    使用Vue动态生成form表单的实例代码

    这篇文章主要介绍了使用Vue动态生成form表单的实例代码,非常不错，具有参考借鉴价值，需要的朋友可以参考下
    2018-04-04
  • Vue3如何处理重复渲染代码的问题

    Vue3如何处理重复渲染代码的问题

    这篇文章主要来和大家一起探讨一下在Vue3项目中如何处理重复渲染代码的问题,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2024-01-01
  • vue3使用高德地图,自定义点标记、默认点聚合样式、点击点标记获取信息

    vue3使用高德地图,自定义点标记、默认点聚合样式、点击点标记获取信息

    这篇文章主要介绍了vue3使用高德地图,自定义点标记、默认点聚合样式、点击点标记获取信息的相关知识,本文结合示例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧
    2024-01-01
  • vue前端灵活改变后端地址两种方式

    vue前端灵活改变后端地址两种方式

    最近在学习或工作中遇到,把Vue前端项目打包后,要求可以再次修改请求后端接口的基础地址,下面这篇文章主要给大家介绍了关于vue前端灵活改变后端地址的两种方式,需要的朋友可以参考下
    2024-03-03
  • vue3中的watch()的用法和具体作用

    vue3中的watch()的用法和具体作用

    这篇文章主要介绍了vue3中的watch()的用法和具体作用,通过合理和熟练使用watch()方法，开发者可以更加高效地完成前端开发工作，需要的朋友可以参考下
    2023-04-04
  • 详解从Vue.js源码看异步更新DOM策略及nextTick

    详解从Vue.js源码看异步更新DOM策略及nextTick

    本篇文章主要介绍了从Vue.js源码看异步更新DOM策略及nextTick，具有一定的参考价值，感兴趣的小伙伴们可以参考一
    2017-10-10
  • 前端vue如何通过URL访问存储在服务器或磁盘的图片

    前端vue如何通过URL访问存储在服务器或磁盘的图片

    在Vue中,通常需要将图片存储在服务器端,并通过url地址来访问,下面这篇文章主要给大家介绍了前端vue如何通过URL访问存储在服务器或磁盘的图片的相关资料,需要的朋友可以参考下
    2024-02-02
  • vue插槽slot的简单理解与用法实例分析

    vue插槽slot的简单理解与用法实例分析

    这篇文章主要介绍了vue插槽slot的简单理解与用法,结合实例形式分析了vue插槽slot的功能、原理、相关使用技巧与操作注意事项,需要的朋友可以参考下
    2020-03-03

最新评论