使用vue-cli 手脚架 生成了webpack-simple一个demo,如果想在vue中使用jquery时,一种办法是直接在index.html中引入jquery,但是这种方法并不是我想使用的,当然还有很多种方法引入jquery到webpack中,但我个人比较喜欢下面的的一种方法。

1.创建包装对象文件

创建jquery的包装对象jquery-vendor.js文件,存放在assets文件夹中,

文件内容:

import $ from 'jquery'
window.$ = $
window.jQuery = $
export default $
2.引用

在main.js文件中引用jquery时,指向jquery-vendor.js即可

import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css'
import './assets/css/index.css'

import $ from '../assets/jquery-vendor.js'//引用
import 'jquery-ui'//其他插件引用

// 此时UI的方法全部可用,如果需要引用bootstrap,可参照此方法

为了调用方便,可在webpack.config.js配置文件中创建jquery-vendor.js的别名

alias: {
    'jquery': 'src/assets/jquery-vendor.js' //将其指向jquery-vendor.js所在位置
}   
Logo

前往低代码交流专区

更多推荐