详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件

 更新时间:2017年06月01日 16:53:53   作者:xuebin_leo  
本篇文章主要介绍了详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件,具有一定的参考价值,有兴趣的可以了解一下

使用vue-cli构建的vue项目,webpack的配置文件是分散在很多地方的,而我们需要修改的是build/webpack.base.conf.js,修改两处的代码

// 在开头引入webpack,后面的plugins那里需要
var webpack = require('webpack')
// resolve

module.exports = {
 // 其他代码...
 resolve: {
  extensions: ['', '.js', '.vue'],
  fallback: [path.join(__dirname, '../node_modules')],
  alias: {
   'src': path.resolve(__dirname, '../src'),
   'assets': path.resolve(__dirname, '../src/assets'),
   'components': path.resolve(__dirname, '../src/components'),

   // webpack 使用 jQuery,如果是自行下载的
   // 'jquery': path.resolve(__dirname, '../src/assets/libs/jquery/jquery.min'),
   // 如果使用NPM安装的jQuery
   'jquery': 'jquery' 
  }
 },

 // 增加一个plugins
 plugins: [
  new webpack.ProvidePlugin({
   $: "jquery",
   jQuery: "jquery"
  })
 ],

 // 其他代码...
}

这样就可以正确的使用jQuery了,比如我要引入Bootstrap,我们在vue的入口js文件src/main.js开头加入

// 使用Bootstrap
import './assets/libs/bootstrap/css/bootstrap.min.css'
import './assets/libs/bootstrap/js/bootstrap.min'

这样Bootstrap就正确的被引用并构建。

在比如使用toastr组件,只需要在需要的地方import进来,或者全局引入css在需要的地方引用js,然后直接使用

// 使用toastr
import 'assets/libs/toastr/toastr.min.css'
import toastr from 'assets/libs/toastr/toastr.min'

toastr.success('Hello')

vue-cli webpack全局引入jquery

1、首先在package.json里加入,

dependencies:{
 "jquery" : "^2.2.3"
}

然后 nmp install

2、在webpack.base.conf.js里加入

var webpack = require("webpack")

3、在module.exports的最后加入

plugins: [
 new webpack.optimize.CommonsChunkPlugin('common.js'),
 new webpack.ProvidePlugin({
  jQuery: "jquery",
  $: "jquery"
 })
]

4、然后一定要重新 run dev

5、在main.js 引入就ok了

import $ from 'jquery'

在.vue文件中引入第三方非NPM模块

var Showbo = require("exports?Showbo!./path/to/showbo.js");

vue-cli引入外部文件

webpack.base.conf.js 中添加externals

externals 中 swiper 是键,对应的值一定的是插件 swiper.js 所定义的变量 Swiper :

之后再在根目录下的index.html文件里引入文件: <script src="static/lib/swiper.js"></script>

这样子就可以在需要用到swiper.js的文件里加入这行代码:import Swiper from 'swiper',这样就能正常使用了。

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

相关文章

  • Vue2中无法检测到数组变动的原因及解决

    Vue2中无法检测到数组变动的原因及解决

    由于某些限制,vue2不能检测到某些情况下数组的变动,本文就将具体讲解这两种限制的解决思路
    2021-06-06
  • 基于Vue2实现数字纵向滚动效果

    基于Vue2实现数字纵向滚动效果

    这篇文章主要为大家详细介绍了如何基于Vue2实现数字纵向滚动效果,从而达到显示计时器滚动效果,感兴趣的小伙伴可以跟随小编一起学习一下
    2024-03-03
  • vue实现pdf文件发送到邮箱功能的示例代码

    vue实现pdf文件发送到邮箱功能的示例代码

    这篇文章主要介绍了vue实现pdf文件发送到邮箱功能,实现代码包括对邮箱格式内容是否为空的验证方法,代码简单易懂,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-05-05
  • Vue.js实现分页查询功能

    Vue.js实现分页查询功能

    这篇文章主要为大家详细介绍了Vue.js实现分页查询功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-11-11
  • 关于element-ui select 下拉框位置错乱问题解决

    关于element-ui select 下拉框位置错乱问题解决

    这篇文章主要介绍了关于element-ui select 下拉框位置错乱问题解决,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • vite创建vue3项目页面引用public下js文件失败解决办法

    vite创建vue3项目页面引用public下js文件失败解决办法

    Vue3相较于之前的版本有了不少变化,如引用全局Js文件,这篇文章主要给大家介绍了关于vite创建vue3项目页面引用public下js文件失败的解决办法,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2023-11-11
  • vue.js单文件组件中非父子组件的传值实例

    vue.js单文件组件中非父子组件的传值实例

    今天小编就为大家分享一篇vue.js单文件组件中非父子组件的传值实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • vue中监听input框获取焦点及失去焦点的问题

    vue中监听input框获取焦点及失去焦点的问题

    这篇文章主要介绍了vue中监听input框获取焦点,失去焦点的问题,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-07-07
  • vue中div禁止点击事件的实现

    vue中div禁止点击事件的实现

    这篇文章主要介绍了vue中div禁止点击事件的实现,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • Uniapp 实现顶部标签页切换功能(详细步骤)

    Uniapp 实现顶部标签页切换功能(详细步骤)

    本文介绍了如何在UniApp中实现顶部标签页切换功能,u-tab-bar组件提供了便捷的标签切换功能和丰富的样式选项,而swiper组件则更加灵活,支持自定义切换方式,根据自己的需求选择合适的方式实现顶部标签页切换,感兴趣的朋友一起看看吧
    2025-02-02

最新评论