vue中怎么安装使用jquery

前端开发   发布日期:2025年02月25日   浏览次数:180

这篇文章主要介绍“vue中怎么安装使用jquery”,在日常操作中,相信很多人在vue中怎么安装使用jquery问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”vue中怎么安装使用jquery”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

vue如何安装使用jquery

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

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

将jquery导入进去

  1. module.exports = {
  2. chainWebpack: config => {
  3. config.plugin('provide').use(webpack.ProvidePlugin, [{
  4. $: 'jquery',
  5. jquery: 'jquery',
  6. jQuery: 'jquery',
  7. 'window.jQuery': 'jquery'
  8. }])
  9. }
  10. }

然后在你需要的地方

  1. import $ from 'jquery'

vue使用npm 安装 jquery、bootstrap

引入jquery

  1. npm install jquery --save-dev

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

  1. //module.exports 上面添加
  2. var webpack = require('webpack')
  3. //module.exports 里面添加
  4. plugins:[
  5. new webpack.optimize.CommonsChunkPlugin('common.js'),
  6. new webpack.ProvidePlugin({
  7. jQuery:'jquery',
  8. $:'jquery'
  9. })
  10. ]

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

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

  1. import $ from 'jquery'

引入bootstrapvue并安装bootstrapvue

  1. npm i vue bootstrap-vue bootstrap

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

  1. import BootstrapVue from 'bootstrap-vue'
  2. Vue.use(BootstrapVue)
  3. import 'bootstrap/dist/css/bootstrap.css'
  4. import 'bootstrap-vue/dist/bootstrap-vue.css'

以上就是vue中怎么安装使用jquery的详细内容,更多关于vue中怎么安装使用jquery的资料请关注九品源码其它相关文章!