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'
   });
  },
 },
}
$(document).ready(function(){
  $('.span123').click(function(){
    alert('123')
  })
})
</script>

这种方式不会影响原来VUE文件中的$的使用，完全可行；但是需要每个vue文件都引入一遍；

2：在入口文件app.vue中整体引入，不会报错

3：在main.js中整体引入，

4：在index.html中整体引入

以上3中方法经过亲测，不会报错，但是VUE文件中的JS也不会执行，不可行；

下面的方法经过亲测，完全可行；

通过npm安装依赖引入

1：通过npm安装依赖引入

npm install jquery -S

2：修改webpack配置文件

build/webpack.base.conf.js

...
var webpack = require("webpack") // 1. 确保引入 webpack，后面会用到

module.exports = {
 ...
 resolve: {
  extensions: ['.js', '.vue', '.json'],
  modules: [
   ..
  ],
  alias: {
   ...
   // 2. 定义别名和插件位置
   'jquery': 'jquery'
  }
 },
 plugins: [
  // 3. 配置全局使用 jquery
  new webpack.ProvidePlugin({
    $: "jquery",
    jQuery: "jquery",
    jquery: "jquery",
    "window.jQuery": "jquery"
  })
 ]
}

手动载入

手动下载jQuery 放在static 目录下，如：static/js/jquery.min.js

alias: {
  ...
  // 2. 定义别名和插件位置
  "jquery": path.resolve(__dirname, '../static/js/jquery.min.js')
},
plugins: [
  // 3. 配置全局使用 jquery
  new webpack.ProvidePlugin({
    $: "jquery",
    jQuery: "jquery",
    jquery: "jquery",
    "window.jQuery": "jquery"
  })
 ]

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

赞 (0)

相关推荐

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

    详解如何在 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.j

  • 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和Bootstrap

    这两天学习了Vue.js ,所以,今天添加一点小笔记. 一.引入jQuery 在当前项目的目录下(就是package.json),运行命令 cnpm install jquery --save-dev  这样就将jquery安装到了这个项目中. 然后修改webpack.base.conf.js(在build文件下)两个地方: 1:加入 var webpack=require('webpack'); 2 在module.exports的里面加入 plugins: [ new webpack.opt

  • Vue.js列表渲染绑定jQuery插件的正确姿势

    使用v-for绑定列表时,有时候需要绑定如select2之类的jQuery插件. 需要在Vue根据数组内容生成dom元素之后,去找到该dom元素,然后 $().xxx绑定jQuery插件. 之前使用Vue.nextTick方法,在一次dom更新以后执行延迟回调,渲染jQuery插件. 然而这并不是一种很好的方式,有时候难以确定dom元素更新是否是我们需要关注的那个. 在列表中渲染Jquery插件的正确姿势,是使用自定义指令.自定义指令提供了一些钩子函数,可以准确的监听到dom元素与数据的绑定周期

  • Webpack+Vue如何导入Jquery和Jquery的第三方插件

    创建一个jquery-vendor.js文件 import $ from 'jQuery'; console.log($); window.$ = $; window.jQuery = $; export default $; 导入JQuery,并赋值给window对象,使其成为一个全局变量. 在vue组件做如下引用 import $ from './assets/jquery-v'; import 'bootstrap-material-design'; //调用初始化 $(function(

  • 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

  • jQuery+vue.js实现的九宫格拼图游戏完整实例【附源码下载】

    本文实例讲述了jQuery+vue.js实现的九宫格拼图游戏.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; } /*#piclist { width: 600p

  • 如何解决vue与传统jquery插件冲突

    本篇文章主要介绍了如何解决vue与传统jquery插件冲突,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧 比如基于jquery的select2插件,在vue下单独用有很多问题,其实对于这类插件,可以用vue的自定义指令和组件来包装,解决冲突的问题.引用官方vue1.0和2.0的两个例子,学习一下. 例子1.0 例子2.0 大功告成.说说基于vue1的,对于下拉单选,用vue官方的例子即可,对于多选,看下面自己写的,核心是用指令对象的el.vm等获取被select2改

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

    详解使用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"

  • jquery加载单文件vue组件的方法

    本文为大家分享了jquery加载单文件vue组件的方法,供大家参考,具体内容如下 /**注册组件 */ function registerComponent(name){ dm[name] = {}; Vue.component(name + '-component', function(resolve, reject){ $.get('./modules/' + name + '.vue').then(function(rv){ var temp = rv.match(/<template[^

随机推荐