vue中怎么安装使用jquery

栏目分类：前端开发    发布日期：2023-09-16    浏览次数：228次     收藏

这篇文章主要介绍“vue中怎么安装使用jquery”，在日常操作中，相信很多人在vue中怎么安装使用jquery问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”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'