Vue-cli（Vue脚手架）中引入jQuery

需求：在Vue项目中使用JQuery

安装成功后 jQuery(两种方法)

1. 下载npm包

   npm install jquery –save
    

2. 在vue ui的可视化页面中下载 jquery

   

3. 安装成功后 package.json显示：

创建 vue.config.js文件

在根目录下创建vue.config.js文件 并配置

1. 在最上面定义 var webpack = require(‘webpack’)

const webpack = require('webpack')
 
module.exports = {
    configureWebpack: {
        plugins: [
            new webpack.ProvidePlugin({
                $: "jquery",
                jQuery: "jquery",
                "windows.jQuery": "jquery"
            })
        ]
    }
}
 

2.其他配置 (框内新增是支持JQuery的配置)

在main.js（入口文件) 引入

• 框出来的都是新增的

import $ from 'jquery'  //导入jquery
Vue.prototype.$ = $   //将$(jquery)挂在到vue.prototype身上，让所有的Vue共享这个方法
 

测试

在 $ ( funtion() {

​ 在这里写 jquery 代码

} )

<script>
export default {}

$(function () { //这里面写jQuery代码
  console.log('引入成功')
})
</script>
 

「点赞、收藏和评论」

❤️关注+点赞+收藏+评论+转发❤️，鼓励笔者创作更好的文章，谢谢?大家。