webpack引入jquery

来源:互联网 发布:怎样变更淘宝店的地区 编辑:程序博客网 时间:2024/05/16 12:16

使用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所在位置}   
原创粉丝点击